Fix formatting issues

## Summary
Restores refresh token functionality that was lost during a previous refactor.
This enables seamless session renewal without forcing users to re-login when
their access token expires.

## Server changes
- Add refresh token configuration to settingsService (7d TTL by default)
- Add issueRefreshToken method to userService
- Update login/register/resetPassword to return refreshToken
- Add refreshAuthToken method to userService for token refresh
- Add refreshAuthToken controller method
- Add POST /auth/refresh route
- Update verifyJWT middleware to return 403 for expired tokens (triggers refresh)
  and 401 for invalid tokens (triggers logout)

## Client changes
- Store refreshToken in Redux auth state
- Clear refreshToken on logout
- Add setAuthToken action for updating token after refresh
- Update NetworkService to handle 403 responses:
  - Call /auth/refresh endpoint to get new token
  - Retry failed request with new token
  - Queue concurrent requests during refresh
  - Redirect to login if refresh fails

.gitignore

@@ -3,4 +3,3 @@
 .VSCodeCounter
 *.sh
 mongo
-node_modules/

.husky/pre-commit

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

CLAUDE.md

@@ -1,145 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Checkmate is an open-source uptime and infrastructure monitoring application. It monitors server hardware, uptime, response times, and incidents with real-time alerts. The companion agent [Capture](https://github.com/bluewave-labs/capture) provides infrastructure metrics (CPU, RAM, disk, temperature).
-
-## Development Commands
-
-### Client (React/Vite)
-```bash
-cd client
-npm install
-npm run dev              # Start dev server at http://localhost:5173
-npm run build            # TypeScript check + production build
-npm run lint             # ESLint (strict, max-warnings 0)
-npm run format           # Prettier formatting
-npm run format-check     # Check formatting
-```
-
-### Server (Node.js/Express)
-```bash
-cd server
-npm install
-npm run dev              # Start with hot-reload (nodemon + tsx) at http://localhost:52345
-npm run build            # TypeScript compile + path alias resolution
-npm run test             # Run Mocha tests with c8 coverage
-npm run lint             # ESLint v9
-npm run lint-fix         # Auto-fix lint issues
-npm run format           # Prettier formatting
-```
-
-### Docker Development
-```bash
-cd docker/dev
-./build_images.sh
-docker run -d -p 27017:27017 -v uptime_mongo_data:/data/db --name uptime_database_mongo mongo:6.0
-```
-
-## Environment Setup
-
-### Server `.env` (minimum required)
-```env
-CLIENT_HOST="http://localhost:5173"
-JWT_SECRET="my_secret_key_change_this"
-DB_CONNECTION_STRING="mongodb://localhost:27017/uptime_db"
-TOKEN_TTL="99d"
-ORIGIN="localhost"
-LOG_LEVEL="debug"
-```
-
-### Client `.env`
-```env
-VITE_APP_API_BASE_URL="http://localhost:52345/api/v1"
-VITE_APP_LOG_LEVEL="debug"
-```
-
-## Architecture
-
-### Monorepo Structure
-- `/client` - React 18 + TypeScript + Vite + MUI frontend
-- `/server` - Node.js 20+ + Express + TypeScript backend
-- `/docker` - Multi-environment Docker configs (dev, staging, prod, arm, mono)
-
-### Backend Layers
-```
-server/src/
-├── controllers/     # Route handlers (authController, monitorController, etc.)
-├── service/         # Business logic
-│   ├── business/    # Core monitoring logic
-│   ├── infrastructure/  # Server/system utilities
-│   └── system/      # App-level settings
-├── db/
-│   ├── models/      # Mongoose schemas (Monitor, Check, Incident, User, etc.)
-│   ├── migration/   # Database migrations (run on startup)
-│   └── modules/     # Database-specific modules
-├── middleware/v1/   # verifyJWT, rateLimiter, sanitization, responseHandler
-├── routes/v1/       # API route definitions
-├── validation/      # Joi input validation schemas
-└── repositories/    # Data access layer
-```
-
-### Frontend Structure
-```
-client/src/
-├── Components/      # Reusable UI components
-├── Pages/           # Page components (Auth, Uptime, Infrastructure, Incidents, etc.)
-├── Features/        # Redux slices (Auth, UI)
-├── Hooks/           # Custom React hooks
-├── Utils/           # Utilities (NetworkService.js is main API client)
-├── Validation/      # Input validation
-└── locales/         # i18n translations
-```
-
-### API
-- Base URL: `/api/v1`
-- Documentation: `http://localhost:52345/api-docs` (Swagger UI)
-- OpenAPI spec: `/server/openapi.json`
-
-### Key Technologies
-- **State Management**: Redux Toolkit + Redux-Persist
-- **Data Fetching**: SWR + Axios
-- **Database**: MongoDB with Mongoose ODM
-- **Queue/Cache**: Redis + BullMQ + Pulse (cron scheduling)
-- **i18n**: i18next + react-i18next (translations via PoEditor)
-
-## Code Conventions
-
-### Internationalization
-All user-facing strings must use the translation function:
-```javascript
-t('your.key')  // Never hardcode UI strings
-```
-
-### Branching
-- Always branch from `develop` (not master)
-- Use descriptive names: `feat/add-alerts`, `fix/login-error`
-- PRs target `develop` branch
-
-### Formatting
-- **Client**: Prettier with `printWidth: 90`, tabs, double quotes
-- **Server**: Prettier with `printWidth: 150`, tabs, double quotes
-- Both use ESLint with strict settings
-
-### Testing
-Server tests use Mocha + Chai + Sinon:
-```bash
-npm test                    # Run all tests with coverage
-npm test -- --grep "pattern"  # Run specific tests
-```
-Test files: `server/tests/**/*.test.js`
-
-## Database Models
-
-Key Mongoose models in `/server/src/db/models/`:
-- **Monitor** - Monitoring configuration (website, infrastructure, port, etc.)
-- **Check** - Individual monitoring check results
-- **Incident** - Downtime incidents
-- **User** - User accounts
-- **Team** - Team/workspace management
-- **StatusPage** - Public status pages
-- **Notification** - Alert configuration (email, Discord, Slack, webhooks)
-- **MaintenanceWindow** - Scheduled maintenance periods
-- **AppSettings** - Global application settings

README.md

@@ -79,8 +79,9 @@ 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) (preferred)
+- [Discord channel](https://discord.gg/NAb6H3UTjK)
-- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
+- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions)
+- [Reddit group](https://www.reddit.com/r/CheckmateMonitoring/)
 
 Feel free to ask questions or share your ideas - we'd love to hear from you!
 

client/package.json

@@ -12,18 +12,16 @@
 		"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": "7.0.0",
+		"@mui/icons-material": "6.4.11",
-		"@mui/material": "7.3.7",
+		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
-		"@mui/x-charts": "7.29.1",
+		"@mui/material": "6.4.11",
-		"@mui/x-date-pickers": "7.29.4",
+		"@mui/x-charts": "^7.5.1",
+		"@mui/x-date-pickers": "7.29.0",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
@@ -32,13 +30,11 @@
 		"human-interval": "2.0.1",
 		"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-ms": "9.3.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",
@@ -47,9 +43,9 @@
 		"react-toastify": "^10.0.5",
 		"recharts": "2.15.2",
 		"redux-persist": "6.0.0",
-		"swr": "^2.3.6",
+		"swr": "2.3.6",
 		"vite-plugin-svgr": "^4.2.0",
-		"zod": "^4.1.11"
+		"zod": "4.1.11"
 	},
 	"devDependencies": {
 		"@types/node": "24.5.2",
@@ -60,7 +56,6 @@
 		"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.jsx

@@ -22,29 +22,13 @@ function App() {
 		};
 	}, []);
 
-	const theme = mode === "light" ? lightTheme : darkTheme;
-
 	return (
-		<ThemeProvider theme={theme}>
+		<ThemeProvider theme={mode === "light" ? lightTheme : darkTheme}>
 			<CssBaseline />
-			<GlobalStyles
-				styles={{
-					body: {
-						backgroundColor: theme.palette.background.main,
-					},
-				}}
-			/>
 			<AppLayout>
 				<Routes />
 			</AppLayout>
-			<ToastContainer
+			<ToastContainer />
-				newestOnTop={true}
-				theme={mode}
-				style={{
-					"--toastify-color-progress-light": "#7C8BA1",
-					"--toastify-color-progress-dark": "#7C8BA1",
-				}}
-			/>
 		</ThemeProvider>
 	);
 }

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

@@ -2,7 +2,7 @@
 import IconButton from "@mui/material/IconButton";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
-import Icon from "../Icon";
+import Settings from "../../../assets/icons/settings-bold.svg?react";
 import Dialog from "../Dialog/index.jsx";
 
 // Utils
@@ -32,6 +32,7 @@ const ActionsMenu = ({
 		event.preventDefault();
 		event.stopPropagation();
 		let monitor = { id: actions.id };
+		console.log(monitor);
 		await deleteMonitor({ monitor });
 		updateRowCallback();
 	};
@@ -83,10 +84,7 @@ const ActionsMenu = ({
 					},
 				}}
 			>
-				<Icon
+				<Settings />
-					name="Settings"
-					size={20}
-				/>
 			</IconButton>
 
 			<Menu

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

@@ -1,7 +1,10 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Box, Button, IconButton, Stack, Typography } from "@mui/material";
-import Icon from "../Icon";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 import "./index.css";
 
 /**
@@ -10,24 +13,9 @@ import "./index.css";
  */
 
 const icons = {
-	info: (
+	info: <InfoOutlinedIcon />,
-		<Icon
+	error: <ErrorOutlineOutlinedIcon />,
-			name="Info"
+	warning: <WarningAmberOutlinedIcon />,
-			size={24}
-		/>
-	),
-	error: (
-		<Icon
-			name="AlertCircle"
-			size={24}
-		/>
-	),
-	warning: (
-		<Icon
-			name="AlertTriangle"
-			size={24}
-		/>
-	),
 };
 
 /**
@@ -109,9 +97,10 @@ const Alert = ({ variant, title, body, isToast, hasIcon = true, onClick }) => {
 						},
 					}}
 				>
-					<Icon
+					<CloseIcon
-						name="X"
+						sx={{
-						size={20}
+							fontSize: "20px",
+						}}
 					/>
 				</IconButton>
 			)}

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

@@ -1,28 +1,27 @@
-import Icon from "../Icon";
+import LeftArrow from "../../../assets/icons/left-arrow.svg?react";
+import LeftArrowDouble from "../../../assets/icons/left-arrow-double.svg?react";
+import LeftArrowLong from "../../../assets/icons/left-arrow-long.svg?react";
 import PropTypes from "prop-types";
 
 const ArrowLeft = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<Icon
+			<LeftArrowDouble
-				name="ChevronsLeft"
+				style={{ color }}
-				color={color}
 				{...props}
 			/>
 		);
 	} else if (type === "long") {
 		return (
-			<Icon
+			<LeftArrowLong
-				name="ArrowLeft"
+				style={{ color }}
-				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<Icon
+			<LeftArrow
-				name="ChevronLeft"
+				style={{ color }}
-				color={color}
 				{...props}
 			/>
 		);

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

@@ -1,20 +1,19 @@
-import Icon from "../Icon";
+import RightArrow from "../../../assets/icons/right-arrow.svg?react";
+import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react";
 import PropTypes from "prop-types";
 
 const ArrowRight = ({ type, color = "#667085", ...props }) => {
 	if (type === "double") {
 		return (
-			<Icon
+			<RightArrowDouble
-				name="ChevronsRight"
+				style={{ color }}
-				color={color}
 				{...props}
 			/>
 		);
 	} else {
 		return (
-			<Icon
+			<RightArrow
-				name="ChevronRight"
+				style={{ color }}
-				color={color}
 				{...props}
 			/>
 		);

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { useEffect, useState } from "react";
 import "./index.css";
 import { useSelector } from "react-redux";

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

@@ -5,7 +5,7 @@ import { Stack, Box, Tooltip, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useState, useEffect } from "react";
 import PropTypes from "prop-types";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { useSelector } from "react-redux";
 
 const PlaceholderCheck = ({ daysToShow }) => {

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

@@ -12,7 +12,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useMemo, useState } from "react";
 import { useSelector } from "react-redux";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import {
 	tooltipDateFormatLookup,
 	tickDateFormatLookup,

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

@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
 import { Box, Stack, Tooltip, Typography } from "@mui/material";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { useEffect, useState, forwardRef } from "react";
 import { useSelector } from "react-redux";
 import PropTypes from "prop-types";
@@ -148,7 +148,7 @@ const StatusPageBarChart = ({ checks = [] }) => {
 							</>
 						}
 						placement="top"
-						key={`check-${check?.id}`}
+						key={`check-${check?._id}`}
 						slotProps={{
 							popper: {
 								className: "bar-tooltip",

client/src/Components/v1/Charts/Utils/chartUtils.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useSelector } from "react-redux";
 import { useTheme } from "@mui/material";
 import { Text } from "recharts";
-import { formatDateWithTz } from "../../../../Utils/timeUtilsLegacy.js";
+import { formatDateWithTz } from "../../../../Utils/timeUtils.js";
 import { Box, Stack, Typography } from "@mui/material";
 import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions.js";
 /**

client/src/Components/v1/Check/Check.jsx

@@ -1,6 +1,7 @@
 import "./check.css";
 import PropTypes from "prop-types";
-import Icon from "../Icon";
+import CheckGrey from "../../../assets/icons/check.svg?react";
+import CheckOutlined from "../../../assets/icons/check-outlined.svg?react";
 import { Box, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -34,16 +35,16 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 			alignItems="center"
 		>
 			{outlined ? (
-				<Icon
+				<CheckOutlined alt="check" />
-					name="CheckCircle"
-					size={20}
-				/>
 			) : (
-				<Icon
+				<Box
-					name="Check"
+					lineHeight={0}
-					size={16}
+					sx={{
-					color={colors[variant]}
+						"& svg > path": { fill: colors[variant] },
-				/>
+					}}
+				>
+					<CheckGrey alt="form checks" />
+				</Box>
 			)}
 			<Typography
 				component="span"
@@ -56,14 +57,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 					fontWeight: 450,
 				}}
 			>
-				{noHighlightText && (
+				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
-					<Typography
-						component="span"
-						sx={{ color: "inherit" }}
-					>
-						{noHighlightText}
-					</Typography>
-				)}{" "}
 				{text}
 			</Typography>
 		</Stack>

client/src/Components/v1/Common/AppBar.jsx

@@ -8,7 +8,8 @@ import IconButton from "@mui/material/IconButton";
 import Container from "@mui/material/Container";
 import MenuItem from "@mui/material/MenuItem";
 import Drawer from "@mui/material/Drawer";
-import Icon from "../Icon";
+import MenuIcon from "@mui/icons-material/Menu";
+import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
 import ThemeSwitch from "../ThemeSwitch/index.jsx";
 import { useTheme } from "@mui/material/styles";
 import { useSelector } from "react-redux";
@@ -152,11 +153,7 @@ const AppAppBar = () => {
 							aria-label="Menu button"
 							onClick={toggleDrawer(true)}
 						>
-							<Icon
+							<MenuIcon sx={{ color: theme.palette.text.primary }} />
-								name="Menu"
-								size={24}
-								color={theme.palette.text.primary}
-							/>
 						</IconButton>
 						<Drawer
 							anchor="top"
@@ -179,11 +176,7 @@ const AppAppBar = () => {
 									}}
 								>
 									<IconButton onClick={toggleDrawer(false)}>
-										<Icon
+										<CloseRoundedIcon sx={{ color: theme.palette.text.primary }} />
-											name="X"
-											size={24}
-											color={theme.palette.text.primary}
-										/>
 									</IconButton>
 								</Box>
 

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

@@ -0,0 +1,99 @@
+import { Checkbox, FormControl, ListItemText, MenuItem, Select } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+
+/**
+ * A reusable filter header component that displays a dropdown menu with selectable options.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {string} props.header - The header text to display when no options are selected.
+ * @param {Array} props.options - An array of options to display in the dropdown menu. Each option should have a `value` and `label`.
+ * @param {Array} [props.value] - The currently selected values.
+ * @param {Function} props.onChange - The callback function to handle changes in the selected values.
+ * @param {boolean} [props.multiple=true] - Whether multiple options can be selected.
+ * @returns {JSX.Element} The rendered FilterHeader component.
+ */
+
+const FilterHeader = ({ header, options, value, onChange, multiple = true }) => {
+	const theme = useTheme();
+
+	const controlledValue = value === undefined ? [] : value; // Ensure value is always treated as an array for controlled component purposes
+
+	return (
+		<FormControl
+			sx={{ minWidth: "10%" }}
+			size="small"
+		>
+			<Select
+				multiple={multiple}
+				IconComponent={(props) => (
+					<AddCircleOutlineIcon
+						{...props}
+						sx={{ fontSize: "medium" }}
+					/>
+				)}
+				displayEmpty
+				value={controlledValue}
+				onChange={onChange}
+				renderValue={(selected) => {
+					if (!selected?.length) {
+						return header;
+					}
+
+					return (
+						header +
+						" | " +
+						selected
+							.map((value) => options.find((option) => option.value === value)?.label)
+							.filter(Boolean)
+							.join(", ")
+					);
+				}}
+				MenuProps={{
+					anchorOrigin: {
+						vertical: "bottom",
+						horizontal: "left",
+					},
+					transformOrigin: {
+						vertical: "top",
+						horizontal: "left",
+					},
+				}}
+			>
+				{options.map((option) => (
+					<MenuItem
+						key={option.value}
+						value={option.value}
+						sx={{
+							height: theme.spacing(17),
+							padding: 0,
+						}}
+					>
+						<Checkbox
+							checked={controlledValue.includes(option.value)}
+							size="small"
+						/>
+						<ListItemText primary={option.label} />
+					</MenuItem>
+				))}
+			</Select>
+		</FormControl>
+	);
+};
+
+FilterHeader.propTypes = {
+	header: PropTypes.string.isRequired,
+	options: PropTypes.arrayOf(
+		PropTypes.shape({
+			value: PropTypes.string.isRequired,
+			label: PropTypes.string.isRequired,
+		})
+	).isRequired,
+	value: PropTypes.arrayOf(PropTypes.string),
+	onChange: PropTypes.func.isRequired,
+	multiple: PropTypes.bool,
+};
+
+export default FilterHeader;

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

@@ -23,12 +23,12 @@ const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 				direction="row"
 				position="relative"
 				alignItems="center"
-				gap={theme.spacing(4)}
+				gap={theme.spacing(5)}
 			>
 				<Typography
-					component="span"
+					variant="h6"
 					sx={{
-						fontWeight: 500,
+						fontWeight: 600,
 					}}
 				>
 					{title}
@@ -38,9 +38,9 @@ const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 					<>
 						<Dot />
 						<Typography
-							component="span"
+							variant="h6"
 							sx={{
-								fontWeight: 500,
+								fontWeight: 600,
 								color: percentageColor,
 							}}
 						>

client/src/Components/v1/Icon/iconMap.js

@@ -1,120 +0,0 @@
-/**
- * Maps legacy icon names to Lucide icon names
- * Use: import { iconMap } from './iconMap'; LucideIcons[iconMap['monitors']]
- */
-export const iconMap = {
-	// Navigation/Sidebar icons
-	monitors: "Globe",
-	incidents: "AlertTriangle",
-	integrations: "Link",
-	"page-speed": "Gauge",
-	settings: "Settings",
-	notifications: "Bell",
-	maintenance: "Wrench",
-	"status-pages": "Wifi",
-	docs: "FileText",
-	discussions: "MessageCircle",
-	support: "HelpCircle",
-	changeLog: "Code",
-	logs: "Database",
-
-	// User icons
-	user: "User",
-	"user-two": "Users",
-	"user-edit": "UserPen",
-	groups: "Users",
-	lock: "Lock",
-	key: "Key",
-	logout: "LogOut",
-
-	// Action icons
-	edit: "Pencil",
-	"trash-bin": "Trash2",
-	search: "Search",
-	"close-icon": "X",
-	check: "Check",
-	"check-icon": "CheckCircle",
-	"check-outlined": "CheckCircle",
-
-	// Arrow icons
-	"left-arrow": "ChevronLeft",
-	"right-arrow": "ChevronRight",
-	"up-arrow": "ChevronUp",
-	"down-arrow": "ChevronDown",
-	"left-arrow-double": "ChevronsLeft",
-	"right-arrow-double": "ChevronsRight",
-	"left-arrow-long": "ArrowLeft",
-	"top-right-arrow": "ArrowUpRight",
-	"open-in-new-page": "ExternalLink",
-	"selector-vertical": "ChevronsUpDown",
-
-	// Status/Alert icons
-	"alert-icon": "Bell",
-	"warning-icon": "AlertCircle",
-	"history-icon": "History",
-
-	// Data/Chart icons
-	dashboard: "LayoutGrid",
-	"monitor-graph-line": "TrendingUp",
-	"response-time-icon": "TrendingUp",
-	"uptime-icon": "Activity",
-	"speedometer-icon": "Gauge",
-	"spedometer-icon": "Gauge",
-	"ruler-icon": "Ruler",
-	"performance-report": "Layers",
-	"average-response-icon": "BarChart3",
-	"distributed-uptime": "Network",
-
-	// Misc icons
-	calendar: "Calendar",
-	"calendar-check": "CalendarCheck",
-	"clock-snooze": "Clock",
-	mail: "Mail",
-	email: "Mail",
-	folder: "Folder",
-	"dots-vertical": "MoreVertical",
-	"pause-icon": "PauseCircle",
-	"resume-icon": "PlayCircle",
-	"checkbox-filled": "CheckSquare",
-	"checkbox-outline": "Square",
-	"radio-checked": "Circle",
-	"cpu-chip": "Cpu",
-	certificate: "Award",
-	"interval-check": "RefreshCw",
-};
-
-/**
- * MUI icon to Lucide mapping
- */
-export const muiToLucideMap = {
-	AddCircleOutline: "PlusCircle",
-	ArrowDownwardRounded: "ArrowDown",
-	ArrowUpwardRounded: "ArrowUp",
-	ArrowDropDown: "ChevronDown",
-	ArrowOutward: "ExternalLink",
-	CheckCircle: "CheckCircle2",
-	Clear: "X",
-	Close: "X",
-	CloseRounded: "X",
-	CloudUpload: "Upload",
-	Delete: "Trash2",
-	DeleteOutlineRounded: "Trash2",
-	Email: "Mail",
-	ErrorOutline: "AlertTriangle",
-	ErrorOutlineOutlined: "AlertTriangle",
-	Image: "ImageIcon",
-	InfoOutlined: "Info",
-	KeyboardArrowDown: "ChevronDown",
-	Menu: "Menu",
-	PauseCircleOutline: "PauseCircle",
-	PauseOutlined: "Pause",
-	PlayArrowOutlined: "Play",
-	PlayCircleOutlineRounded: "PlayCircle",
-	RadioButtonChecked: "Circle",
-	ReorderRounded: "GripVertical",
-	SettingsOutlined: "Settings",
-	Share: "Share2",
-	Visibility: "Eye",
-	VisibilityOff: "EyeOff",
-	WarningAmberOutlined: "AlertTriangle",
-};

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

@@ -1,198 +0,0 @@
-import { useTheme } from "@mui/material";
-import PropTypes from "prop-types";
-import {
-	Activity,
-	AlertCircle,
-	AlertTriangle,
-	ArrowDown,
-	ArrowLeft,
-	ArrowUp,
-	ArrowUpRight,
-	Bell,
-	Calendar,
-	Check,
-	CheckCircle,
-	CheckCircle2,
-	CheckSquare,
-	ChevronDown,
-	ChevronLeft,
-	ChevronRight,
-	ChevronsLeft,
-	ChevronsRight,
-	ChevronsUpDown,
-	Circle,
-	CircleDot,
-	Clock,
-	Code,
-	Cpu,
-	Database,
-	ExternalLink,
-	Eye,
-	EyeOff,
-	FileText,
-	Gauge,
-	Globe,
-	GripVertical,
-	HelpCircle,
-	History,
-	Image as ImageIcon,
-	Info,
-	Key,
-	Layers,
-	Link,
-	Lock,
-	LogOut,
-	Mail,
-	Menu,
-	MessageCircle,
-	MoreVertical,
-	Pause,
-	PauseCircle,
-	Play,
-	PlayCircle,
-	PlusCircle,
-	RefreshCw,
-	Ruler,
-	Search,
-	Settings,
-	Square,
-	Trash2,
-	TrendingUp,
-	Upload,
-	User,
-	Users,
-	Wifi,
-	Wrench,
-	X,
-} from "lucide-react";
-
-/**
- * Map of icon names to Lucide icon components.
- * Only icons explicitly imported here will be included in the bundle (tree-shaking).
- * To add a new icon: import it above and add it to this object.
- */
-const iconComponents = {
-	Activity,
-	AlertCircle,
-	AlertTriangle,
-	ArrowDown,
-	ArrowLeft,
-	ArrowUp,
-	ArrowUpRight,
-	Bell,
-	Calendar,
-	Check,
-	CheckCircle,
-	CheckCircle2,
-	CheckSquare,
-	ChevronDown,
-	ChevronLeft,
-	ChevronRight,
-	ChevronsLeft,
-	ChevronsRight,
-	ChevronsUpDown,
-	Circle,
-	CircleDot,
-	Clock,
-	Code,
-	Cpu,
-	Database,
-	ExternalLink,
-	Eye,
-	EyeOff,
-	FileText,
-	Gauge,
-	Globe,
-	GripVertical,
-	HelpCircle,
-	History,
-	Image: ImageIcon,
-	Info,
-	Key,
-	Layers,
-	Link,
-	Lock,
-	LogOut,
-	Mail,
-	Menu,
-	MessageCircle,
-	MoreVertical,
-	Pause,
-	PauseCircle,
-	Play,
-	PlayCircle,
-	PlusCircle,
-	RefreshCw,
-	Ruler,
-	Search,
-	Settings,
-	Square,
-	Trash2,
-	TrendingUp,
-	Upload,
-	User,
-	Users,
-	Wifi,
-	Wrench,
-	X,
-};
-
-/**
- * Theme-aware icon component wrapping Lucide icons
- *
- * @param {string} name - Lucide icon name (e.g., "Bell", "Check", "ArrowLeft")
- * @param {number} size - Icon size in pixels (default: 20)
- * @param {string} color - Direct color value OR theme path like "primary.contrastText"
- * @param {number} strokeWidth - Stroke width (default: 1.5)
- * @param {string} fill - Fill color (default: "none")
- */
-const Icon = ({ name, size = 20, color, strokeWidth = 1.5, fill = "none", ...props }) => {
-	const theme = useTheme();
-
-	// Resolve color from theme path or use direct value
-	const resolveColor = (colorValue) => {
-		if (!colorValue) {
-			return theme.palette.primary.contrastTextTertiary; // Default icon color
-		}
-
-		// If it's a theme path like "primary.contrastText"
-		if (typeof colorValue === "string" && colorValue.includes(".")) {
-			const parts = colorValue.split(".");
-			let resolved = theme.palette;
-			for (const part of parts) {
-				resolved = resolved?.[part];
-			}
-			return resolved || colorValue;
-		}
-
-		// Direct color value
-		return colorValue;
-	};
-
-	const LucideIcon = iconComponents[name];
-
-	if (!LucideIcon) {
-		console.warn(`Icon "${name}" not found in Icon component`);
-		return null;
-	}
-
-	return (
-		<LucideIcon
-			size={size}
-			color={resolveColor(color)}
-			strokeWidth={strokeWidth}
-			fill={fill}
-			{...props}
-		/>
-	);
-};
-
-Icon.propTypes = {
-	name: PropTypes.string.isRequired,
-	size: PropTypes.number,
-	color: PropTypes.string,
-	strokeWidth: PropTypes.number,
-	fill: PropTypes.string,
-};
-
-export default Icon;

client/src/Components/v1/Inputs/Checkbox/index.jsx

@@ -1,7 +1,8 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Icon from "../../Icon";
+import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react";
+import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react";
 
 /**
  * Checkbox Component
@@ -64,8 +65,8 @@ const Checkbox = ({
 					name={name}
 					value={value}
 					onChange={onChange}
-					icon={<Icon name="Square" />}
+					icon={<CheckboxOutline />}
-					checkedIcon={<Icon name="CheckSquare" />}
+					checkedIcon={<CheckboxFilled />}
 					inputProps={{
 						"aria-label": "controlled checkbox",
 						id: id,

client/src/Components/v1/Inputs/ImageUpload/index.jsx

@@ -1,10 +1,11 @@
 // Components
 import { Box, Stack, Typography } from "@mui/material";
-import Icon from "../../Icon";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import Image from "../../Image/index.jsx";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import ProgressUpload from "../../ProgressBars/index.jsx";
+import ImageIcon from "@mui/icons-material/Image";
 
 // Utils
 import PropTypes from "prop-types";
@@ -175,10 +176,7 @@ const ImageUpload = ({
 									boxShadow: theme.shape.boxShadow,
 								}}
 							>
-								<Icon
+								<CloudUploadIcon />
-									name="Upload"
-									size={24}
-								/>
 							</IconButton>
 							<Typography
 								component="h2"
@@ -205,12 +203,7 @@ const ImageUpload = ({
 					</Box>
 					{(localError || progress.isLoading || progress.value !== 0) && (
 						<ProgressUpload
-							icon={
+							icon={<ImageIcon />}
-								<Icon
-									name="Image"
-									size={20}
-								/>
-							}
 							label={file?.name || "Upload failed"}
 							size={file?.size}
 							progress={progress.value}

client/src/Components/v1/Inputs/Radio/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Icon from "../../Icon";
+import RadioChecked from "../../../../assets/icons/radio-checked.svg?react";
 import "./index.css";
 
 /**
@@ -47,12 +47,7 @@ const Radio = ({
 				<MUIRadio
 					id={id}
 					size={size}
-					checkedIcon={
+					checkedIcon={<RadioChecked />}
-						<Icon
-							name="CircleDot"
-							size={16}
-						/>
-					}
 					sx={{
 						color: "transparent",
 						width: 16,

client/src/Components/v1/Inputs/Search/index.jsx

@@ -8,7 +8,7 @@ import {
 	Checkbox,
 } from "@mui/material";
 import { useTheme } from "@emotion/react";
-import Icon from "../../Icon";
+import SearchIcon from "../../../../assets/icons/search.svg?react";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import FieldWrapper from "../FieldWrapper/index.jsx";
@@ -31,13 +31,20 @@ import FieldWrapper from "../FieldWrapper/index.jsx";
 const SearchAdornment = () => {
 	const theme = useTheme();
 	return (
-		<Box height={16}>
+		<Box
-			<Icon
+			height={16}
-				name="Search"
+			sx={{
-				size={16}
+				"& svg": {
-				color="primary.contrastTextTertiary"
+					width: 16,
-				strokeWidth={1.2}
+					height: 16,
-			/>
+					"& path": {
+						stroke: theme.palette.primary.contrastTextTertiary,
+						strokeWidth: 1.2,
+					},
+				},
+			}}
+		>
+			<SearchIcon />
 		</Box>
 	);
 };

client/src/Components/v1/Inputs/Select/index.jsx

@@ -1,7 +1,7 @@
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material";
-import Icon from "../../Icon";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import FieldWrapper from "../FieldWrapper/index.jsx";
 
 import "./index.css";
@@ -98,13 +98,7 @@ const Select = ({
 				error={error}
 				name={name}
 				inputProps={{ id: id }}
-				IconComponent={(props) => (
+				IconComponent={KeyboardArrowDownIcon}
-					<Icon
-						name="ChevronDown"
-						size={20}
-						{...props}
-					/>
-				)}
 				MenuProps={{ disableScrollLock: true }}
 				sx={{
 					fontSize: 13,

client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx

@@ -1,7 +1,10 @@
 import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import PropTypes from "prop-types";
-import Icon from "../../../Icon";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+import Visibility from "@mui/icons-material/Visibility";
+import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded";
+import DeleteIcon from "../../../../../assets/icons/trash-bin.svg?react";
 
 export const HttpAdornment = ({ https }) => {
 	const theme = useTheme();
@@ -53,17 +56,7 @@ export const PasswordEndAdornment = ({ fieldType, setFieldType }) => {
 					},
 				}}
 			>
-				{fieldType === "password" ? (
+				{fieldType === "password" ? <VisibilityOff /> : <Visibility />}
-					<Icon
-						name="EyeOff"
-						size={20}
-					/>
-				) : (
-					<Icon
-						name="Eye"
-						size={20}
-					/>
-				)}
 			</IconButton>
 		</InputAdornment>
 	);

client/src/Components/v1/Layouts/HomeLayout/index.css

@@ -3,8 +3,6 @@
 	min-height: 100vh;
 	margin: 0 auto;
 	padding: 0;
-	overflow-x: hidden;
-	width: 100%;
 }
 
 /* TODO go for this approach for responsiveness. The aside needs to be taken care of */
@@ -14,7 +12,15 @@
 	}
 } */
 
-.home-layout > .home-content-wrapper {
+/* .home-layout aside {
+	position: sticky;
+	top: 0;
+	left: 0;
+	height: 100vh;
+	max-width: var(--env-var-side-bar-width);
+} */
+
+.home-layout > div {
 	min-height: calc(100vh - var(--env-var-spacing-2) * 2);
 	flex: 1;
 }
@@ -24,6 +30,4 @@
 	max-width: 1400px;
 	margin: 0 auto;
 	flex: 1;
-	min-width: 0;
-	overflow-x: hidden;
 }

client/src/Components/v1/Layouts/HomeLayout/index.jsx

@@ -1,27 +1,17 @@
 import Sidebar from "../../Sidebar/index.jsx";
 import { Outlet } from "react-router";
-import { Box, Stack } from "@mui/material";
+import { Stack } from "@mui/material";
-import { useSidebar } from "@/Hooks/useSidebar.js";
 
 import "./index.css";
 
 const HomeLayout = () => {
-	const { width, transition } = useSidebar();
-
 	return (
 		<Stack
 			className="home-layout"
 			flexDirection="row"
+			gap={14}
 		>
 			<Sidebar />
-			{/* Spacer for fixed sidebar */}
-			<Box
-				sx={{
-					width,
-					flexShrink: 0,
-					transition,
-				}}
-			/>
 			<Stack className="home-content-wrapper">
 				<Outlet />
 			</Stack>

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

@@ -0,0 +1,116 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import Grow from "@mui/material/Grow";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { createToast } from "../../../Utils/toastUtils.jsx";
+import { useExportMonitors } from "../../../Hooks/monitorHooks.js";
+
+const MonitorActions = ({ isLoading }) => {
+	const [open, setOpen] = React.useState(false);
+	const anchorRef = React.useRef(null);
+	const [selectedIndex, setSelectedIndex] = React.useState(0);
+	const navigate = useNavigate();
+	const { t } = useTranslation();
+	const [exportMonitors, isExporting] = useExportMonitors();
+
+	const options = [t("monitorActions.import"), t("monitorActions.export")];
+
+	const handleClick = async () => {
+		if (selectedIndex === 0) {
+			// Import
+			navigate("/uptime/bulk-import");
+		} else {
+			// Export
+			const [success, error] = await exportMonitors();
+			if (!success) {
+				createToast({ body: error || t("export.failed") });
+			}
+		}
+	};
+
+	const handleMenuItemClick = (event, index) => {
+		setSelectedIndex(index);
+		setOpen(false);
+	};
+
+	const handleToggle = () => {
+		setOpen((prevOpen) => !prevOpen);
+	};
+
+	const handleClose = (event) => {
+		if (anchorRef.current && anchorRef.current.contains(event.target)) {
+			return;
+		}
+		setOpen(false);
+	};
+
+	return (
+		<React.Fragment>
+			<ButtonGroup
+				variant="contained"
+				color="accent"
+				ref={anchorRef}
+				aria-label="Monitor actions"
+				disabled={isLoading || isExporting}
+			>
+				<Button onClick={handleClick}>{options[selectedIndex]}</Button>
+				<Button
+					size="small"
+					aria-controls={open ? "split-button-menu" : undefined}
+					aria-expanded={open ? "true" : undefined}
+					aria-label="select monitor action"
+					aria-haspopup="menu"
+					onClick={handleToggle}
+				>
+					<ArrowDropDownIcon />
+				</Button>
+			</ButtonGroup>
+			<Popper
+				sx={{ zIndex: 1 }}
+				open={open}
+				anchorEl={anchorRef.current}
+				role={undefined}
+				transition
+				disablePortal
+			>
+				{({ TransitionProps, placement }) => (
+					<Grow
+						{...TransitionProps}
+						style={{
+							transformOrigin: placement === "bottom" ? "center top" : "center bottom",
+						}}
+					>
+						<Paper>
+							<ClickAwayListener onClickAway={handleClose}>
+								<MenuList
+									id="split-button-menu"
+									autoFocusItem
+								>
+									{options.map((option, index) => (
+										<MenuItem
+											key={option}
+											selected={index === selectedIndex}
+											onClick={(event) => handleMenuItemClick(event, index)}
+										>
+											{option}
+										</MenuItem>
+									))}
+								</MenuList>
+							</ClickAwayListener>
+						</Paper>
+					</Grow>
+				)}
+			</Popper>
+		</React.Fragment>
+	);
+};
+
+export default MonitorActions;

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

@@ -0,0 +1,52 @@
+import { Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import SkeletonLayout from "./skeleton.jsx";
+
+const MonitorCountHeader = ({
+	isLoading = false,
+	monitorCount,
+	heading = "monitors",
+	sx,
+	children,
+}) => {
+	const theme = useTheme();
+	if (isLoading) return <SkeletonLayout />;
+
+	if (monitorCount === 1) {
+		heading = "monitor";
+	}
+
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			display="flex"
+			width="fit-content"
+			height={theme.spacing(18)}
+			gap={theme.spacing(2)}
+			mt={theme.spacing(2)}
+			px={theme.spacing(4)}
+			pt={theme.spacing(2)}
+			pb={theme.spacing(3)}
+			borderRadius={theme.spacing(1)}
+			sx={{
+				...sx,
+				backgroundColor: theme.palette.secondary.main,
+			}}
+		>
+			{monitorCount} <Typography component="h2">{heading}</Typography>
+			{children}
+		</Stack>
+	);
+};
+
+MonitorCountHeader.propTypes = {
+	isLoading: PropTypes.bool,
+	monitorCount: PropTypes.number,
+	heading: PropTypes.string,
+	children: PropTypes.node,
+	sx: PropTypes.object,
+};
+
+export default MonitorCountHeader;

client/src/Components/v1/MonitorCountHeader/skeleton.jsx

@@ -0,0 +1,26 @@
+import { Stack, Skeleton } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+const SkeletonLayout = () => {
+	const theme = useTheme();
+	return (
+		<Stack
+			direction="row"
+			alignItems="center"
+			gap={theme.spacing(2)}
+		>
+			<Skeleton
+				variant="text"
+				width={100}
+				height={32}
+			/>
+			<Skeleton
+				variant="circular"
+				width={40}
+				height={40}
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;

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

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
 import { useTheme } from "@emotion/react";
+import MonitorActions from "../MonitorActions/index.jsx";
 
 const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath }) => {
 	const navigate = useNavigate();

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

@@ -0,0 +1,141 @@
+import Stack from "@mui/material/Stack";
+import Status from "./status.jsx";
+import Skeleton from "./skeleton.jsx";
+import Button from "@mui/material/Button";
+import { Tooltip } from "@mui/material";
+import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
+import PauseOutlinedIcon from "@mui/icons-material/PauseOutlined";
+import PlayArrowOutlinedIcon from "@mui/icons-material/PlayArrowOutlined";
+import EmailIcon from "@mui/icons-material/Email";
+
+// Utils
+import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom";
+import { useTheme } from "@mui/material/styles";
+import { usePauseMonitor } from "../../../Hooks/monitorHooks.js";
+import { useSendTestEmail } from "../../../Hooks/useSendTestEmail.js";
+import { useTranslation } from "react-i18next";
+import { useTestAllNotifications } from "../../../Hooks/useNotifications.js";
+/**
+ * MonitorDetailsControlHeader component displays the control header for monitor details.
+ * It includes status display, pause/resume button, and a configure button for admins.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.path - The base path for navigation
+ * @param {boolean} [props.isLoading=false] - Flag indicating if the data is loading
+ * @param {boolean} [props.isAdmin=false] - Flag indicating if the user is an admin
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {Function} props.triggerUpdate - Function to trigger an update
+ * @returns {JSX.Element} The rendered component
+ */
+const MonitorDetailsControlHeader = ({
+	path,
+	isLoading = false,
+	isAdmin = false,
+	monitor,
+	triggerUpdate,
+}) => {
+	const navigate = useNavigate();
+	const theme = useTheme();
+	const { t } = useTranslation();
+	const [pauseMonitor, isPausing, error] = usePauseMonitor();
+
+	const isTestNotificationsDisabled = monitor?.notifications?.length === 0;
+
+	const tooltipTitle = isTestNotificationsDisabled ? t("testNotificationsDisabled") : "";
+
+	// const [isSending, emailError, sendTestEmail] = useSendTestEmail();
+
+	const [testAllNotifications, isSending, errorAllNotifications] =
+		useTestAllNotifications();
+
+	if (isLoading) {
+		return <Skeleton />;
+	}
+
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Status monitor={monitor} />
+
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Tooltip
+					key={monitor?.id}
+					placement="bottom"
+					title={tooltipTitle}
+				>
+					<span>
+						<Button
+							variant="contained"
+							color="secondary"
+							loading={isSending}
+							startIcon={<EmailIcon />}
+							disabled={isTestNotificationsDisabled}
+							onClick={() => {
+								testAllNotifications({ monitorId: monitor?.id });
+							}}
+							sx={{
+								whiteSpace: "nowrap",
+							}}
+						>
+							{t("sendTestNotifications")}
+						</Button>
+					</span>
+				</Tooltip>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={(e) => {
+						navigate(`/incidents/${monitor?.id}`);
+					}}
+				>
+					{t("menu.incidents")}
+				</Button>
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						loading={isPausing}
+						startIcon={
+							monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+						}
+						onClick={() => {
+							pauseMonitor({
+								monitorId: monitor?.id,
+								triggerUpdate,
+							});
+						}}
+					>
+						{monitor?.isActive ? "Pause" : "Resume"}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						startIcon={<SettingsOutlinedIcon />}
+						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
+					>
+						Configure
+					</Button>
+				)}
+			</Stack>
+		</Stack>
+	);
+};
+
+MonitorDetailsControlHeader.propTypes = {
+	path: PropTypes.string,
+	isLoading: PropTypes.bool,
+	isAdmin: PropTypes.bool,
+	monitor: PropTypes.object,
+	triggerUpdate: PropTypes.func,
+};
+
+export default MonitorDetailsControlHeader;

client/src/Components/v1/MonitorDetailsControlHeader/skeleton.jsx

@@ -0,0 +1,23 @@
+import { Stack, Skeleton } from "@mui/material";
+
+const SkeletonLayout = () => {
+	return (
+		<Stack
+			direction="row"
+			justifyContent="space-between"
+		>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+			<Skeleton
+				height={40}
+				variant="rounded"
+				width="15%"
+			/>
+		</Stack>
+	);
+};
+
+export default SkeletonLayout;

client/src/Components/v1/MonitorDetailsControlHeader/status.jsx

@@ -0,0 +1,51 @@
+// Components
+import Stack from "@mui/material/Stack";
+import PulseDot from "../Animated/PulseDot.jsx";
+import Typography from "@mui/material/Typography";
+import Dot from "../Dot/index.jsx";
+// Utils
+import { formatDurationRounded } from "../../../Utils/timeUtils.js";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import { useMonitorUtils } from "../../../Hooks/useMonitorUtils.js";
+import { formatMonitorUrl } from "../../../Utils/utils.js";
+/**
+ * Status component displays the status information of a monitor.
+ * It includes the monitor's name, URL, and check interval.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Object} props.monitor - The monitor object containing details
+ * @param {string} props.monitor.name - The name of the monitor
+ * @param {string} props.monitor.url - The URL of the monitor
+ * @param {number} props.monitor.interval - The interval at which the monitor checks
+ * @returns {JSX.Element} The rendered component
+ */
+const Status = ({ monitor }) => {
+	const theme = useTheme();
+	const { statusColor, determineState } = useMonitorUtils();
+
+	return (
+		<Stack>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
+			<Stack
+				direction="row"
+				alignItems={"center"}
+				gap={theme.spacing(4)}
+			>
+				<PulseDot color={statusColor[determineState(monitor)]} />
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
+				<Dot />
+				<Typography>
+					Checking every {formatDurationRounded(monitor?.interval)}.
+				</Typography>
+			</Stack>
+		</Stack>
+	);
+};
+
+Status.propTypes = {
+	monitor: PropTypes.object,
+};
+
+export default Status;

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

@@ -0,0 +1,125 @@
+// Components
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded";
+import Search from "../Inputs/Search/index.jsx";
+
+// Utils
+import { useState, useEffect } from "react";
+import { useTheme } from "@mui/material/styles";
+import PropTypes from "prop-types";
+
+const NotificationConfig = ({
+	notifications,
+	setMonitor,
+	setNotifications,
+	//FieldWrapper's props
+	gap,
+	labelMb,
+	labelFontWeight,
+	labelVariant,
+	labelSx = {},
+	sx = {},
+}) => {
+	// Local state
+	const [notificationsSearch, setNotificationsSearch] = useState("");
+	const [selectedNotifications, setSelectedNotifications] = useState([]);
+
+	const handleSearch = (value) => {
+		setSelectedNotifications(value);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: value.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Handlers
+	const handleDelete = (id) => {
+		const updatedNotifications = selectedNotifications.filter(
+			(notification) => notification._id !== id
+		);
+
+		setSelectedNotifications(updatedNotifications);
+		setMonitor((prev) => {
+			return {
+				...prev,
+				notifications: updatedNotifications.map((notification) => notification._id),
+			};
+		});
+	};
+
+	// Setup
+	const theme = useTheme();
+
+	useEffect(() => {
+		if (setNotifications) {
+			const toSet = setNotifications.map((notification) => {
+				return notifications.find((n) => n._id === notification);
+			});
+			setSelectedNotifications(toSet);
+		}
+	}, [setNotifications, notifications]);
+
+	return (
+		<Stack gap={theme.spacing(6)}>
+			<Search
+				type="notifications"
+				label="Notifications"
+				options={notifications}
+				filteredBy="notificationName"
+				multiple={true}
+				value={selectedNotifications}
+				inputValue={notificationsSearch}
+				handleInputChange={setNotificationsSearch}
+				handleChange={(value) => {
+					handleSearch(value);
+				}}
+				labelMb={labelMb}
+				labelVariant={labelVariant}
+				labelFontWeight={labelFontWeight}
+				labelSx={labelSx}
+				gap={gap}
+				sx={{
+					...sx,
+				}}
+			/>
+			<Stack
+				flex={1}
+				width="100%"
+			>
+				{selectedNotifications.map((notification, index) => (
+					<Stack
+						direction="row"
+						alignItems="center"
+						key={notification._id}
+						width="100%"
+					>
+						<Typography
+							flexGrow={1} // <-- This will take up all available horizontal space
+						>
+							{notification.notificationName}
+						</Typography>
+						<DeleteOutlineRoundedIcon
+							onClick={() => {
+								handleDelete(notification._id);
+							}}
+							sx={{ cursor: "pointer" }}
+						/>
+						{index < selectedNotifications.length - 1 && <Divider />}
+					</Stack>
+				))}
+			</Stack>
+		</Stack>
+	);
+};
+
+NotificationConfig.propTypes = {
+	notifications: PropTypes.array,
+	setMonitor: PropTypes.func,
+	setNotifications: PropTypes.array,
+};
+
+export default NotificationConfig;

client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx

@@ -0,0 +1,419 @@
+import { useState, useMemo, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+
+import {
+	Dialog,
+	DialogContent,
+	DialogActions,
+	Button,
+	Typography,
+	Box,
+	Tabs,
+	Tab,
+	Stack,
+} from "@mui/material";
+import { useTheme } from "@emotion/react";
+import TabPanel from "./TabPanel.jsx";
+import TabComponent from "./TabComponent.jsx";
+import useNotifications from "../Hooks/useNotification.js";
+
+// Define constants for notification types to avoid magic values
+const NOTIFICATION_TYPES = {
+	SLACK: "slack",
+	DISCORD: "discord",
+	TELEGRAM: "telegram",
+	WEBHOOK: "webhook",
+};
+
+// Define constants for field IDs
+const FIELD_IDS = {
+	WEBHOOK: "webhook",
+	TOKEN: "token",
+	CHAT_ID: "chatId",
+	URL: "url",
+};
+
+const NotificationIntegrationModal = ({
+	open,
+	onClose,
+	monitor,
+	setMonitor,
+	// Optional prop to configure available notification types
+	notificationTypes = null,
+}) => {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const [tabValue, setTabValue] = useState(0);
+
+	const [loading, _, sendTestNotification] = useNotifications();
+
+	// Helper to get the field state key with error handling
+	const getFieldKey = useCallback(
+		(typeId, fieldId) => {
+			if (typeof typeId !== "string" || typeId === "") {
+				throw new Error(t("errorInvalidTypeId"));
+			}
+
+			if (typeof fieldId !== "string" || fieldId === "") {
+				throw new Error(t("errorInvalidFieldId"));
+			}
+
+			return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
+		},
+		[t]
+	);
+
+	// Define notification types
+	const DEFAULT_NOTIFICATION_TYPES = [
+		{
+			id: NOTIFICATION_TYPES.SLACK,
+			label: t("notifications.slack.label"),
+			description: t("notifications.slack.description"),
+			fields: [
+				{
+					id: FIELD_IDS.WEBHOOK,
+					label: t("notifications.slack.webhookLabel"),
+					placeholder: t("notifications.slack.webhookPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.DISCORD,
+			label: t("notifications.discord.label"),
+			description: t("notifications.discord.description"),
+			fields: [
+				{
+					id: FIELD_IDS.WEBHOOK,
+					label: t("notifications.discord.webhookLabel"),
+					placeholder: t("notifications.discord.webhookPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.TELEGRAM,
+			label: t("notifications.telegram.label"),
+			description: t("notifications.telegram.description"),
+			fields: [
+				{
+					id: FIELD_IDS.TOKEN,
+					label: t("notifications.telegram.tokenLabel"),
+					placeholder: t("notifications.telegram.tokenPlaceholder"),
+					type: "text",
+				},
+				{
+					id: FIELD_IDS.CHAT_ID,
+					label: t("notifications.telegram.chatIdLabel"),
+					placeholder: t("notifications.telegram.chatIdPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+		{
+			id: NOTIFICATION_TYPES.WEBHOOK,
+			label: t("notifications.webhook.label"),
+			description: t("notifications.webhook.description"),
+			fields: [
+				{
+					id: FIELD_IDS.URL,
+					label: t("notifications.webhook.urlLabel"),
+					placeholder: t("notifications.webhook.urlPlaceholder"),
+					type: "text",
+				},
+			],
+		},
+	];
+
+	// Use provided notification types or default to our translated ones
+	const activeNotificationTypes = notificationTypes || DEFAULT_NOTIFICATION_TYPES;
+
+	// Memoized function to initialize integrations state
+	const initialIntegrationsState = useMemo(() => {
+		const state = {};
+
+		activeNotificationTypes.forEach((type) => {
+			// Add enabled flag for each notification type
+			state[type.id] = false;
+
+			// Add state for each field in the notification type
+			type.fields.forEach((field) => {
+				const fieldKey = getFieldKey(type.id, field.id);
+				state[fieldKey] = "";
+			});
+		});
+
+		return state;
+	}, [activeNotificationTypes, getFieldKey]); // Only recompute when these dependencies change
+
+	const [integrations, setIntegrations] = useState(initialIntegrationsState);
+
+	useEffect(() => {
+		if (open) {
+			const extractNotificationValues = () => {
+				const values = {};
+
+				if (!monitor?.notifications || !Array.isArray(monitor.notifications)) {
+					return values;
+				}
+
+				monitor.notifications.forEach((notification) => {
+					// Handle notification based on its structure
+					if (notification.type === "webhook" && notification.platform) {
+						if (typeof notification.config === "undefined") return;
+						const platform = notification.platform;
+						values[platform] = true; // Set platform as enabled
+
+						// Extract configuration based on platform
+						switch (platform) {
+							case NOTIFICATION_TYPES.SLACK:
+							case NOTIFICATION_TYPES.DISCORD:
+								if (notification.config.webhookUrl) {
+									values[getFieldKey(platform, FIELD_IDS.WEBHOOK)] =
+										notification.config.webhookUrl;
+								}
+								break;
+							case NOTIFICATION_TYPES.TELEGRAM:
+								if (notification.config.botToken) {
+									values[getFieldKey(platform, FIELD_IDS.TOKEN)] =
+										notification.config.botToken;
+								}
+								if (notification.config.chatId) {
+									values[getFieldKey(platform, FIELD_IDS.CHAT_ID)] =
+										notification.config.chatId;
+								}
+								break;
+							case NOTIFICATION_TYPES.WEBHOOK:
+								if (notification.config.webhookUrl) {
+									values[getFieldKey(platform, FIELD_IDS.URL)] =
+										notification.config.webhookUrl;
+								}
+								break;
+						}
+					}
+				});
+
+				return values;
+			};
+
+			const extractedValues = extractNotificationValues();
+			setIntegrations((prev) => ({
+				...prev,
+				...extractedValues,
+			}));
+		}
+	}, [open, monitor, getFieldKey]);
+
+	const handleChangeTab = (event, newValue) => {
+		setTabValue(newValue);
+	};
+
+	const handleIntegrationChange = (type, checked) => {
+		setIntegrations((prev) => ({
+			...prev,
+			[type]: checked,
+		}));
+	};
+
+	const handleInputChange = (type, value) => {
+		setIntegrations((prev) => ({
+			...prev,
+			[type]: value,
+		}));
+	};
+
+	const handleTestNotification = async (type) => {
+		// Get the notification type details
+		const notificationType = activeNotificationTypes.find((t) => t.id === type);
+
+		if (typeof notificationType === "undefined") {
+			return;
+		}
+
+		// Prepare config object based on notification type
+		const config = {};
+
+		// Add each field value to the config object
+		notificationType.fields.forEach((field) => {
+			const fieldKey = getFieldKey(type, field.id);
+			config[field.id] = integrations[fieldKey];
+		});
+
+		await sendTestNotification(type, config);
+	};
+
+	// In NotificationIntegrationModal.jsx, update the handleSave function:
+
+	const handleSave = () => {
+		// Get existing notifications
+		const notifications = [...(monitor?.notifications || [])];
+
+		// Get all notification types IDs
+		const existingTypes = activeNotificationTypes.map((type) => type.id);
+
+		// Filter out notifications that are configurable in this modal
+		const filteredNotifications = notifications.filter((notification) => {
+			if (notification.platform) {
+				return !existingTypes.includes(notification.platform);
+			}
+
+			return !existingTypes.includes(notification.type);
+		});
+
+		// Add each enabled notification with its configured fields
+		activeNotificationTypes.forEach((type) => {
+			if (integrations[type.id]) {
+				let notificationObject = {
+					type: "webhook",
+					platform: type.id, // Set platform to identify the specific service
+					config: {},
+				};
+
+				// Configure based on notification type
+				switch (type.id) {
+					case "slack":
+					case "discord":
+						notificationObject.config.webhookUrl =
+							integrations[getFieldKey(type.id, "webhook")];
+						break;
+					case "telegram":
+						notificationObject.config.botToken =
+							integrations[getFieldKey(type.id, "token")];
+						notificationObject.config.chatId =
+							integrations[getFieldKey(type.id, "chatId")];
+						break;
+					case "webhook":
+						notificationObject.config.webhookUrl =
+							integrations[getFieldKey(type.id, "url")];
+						break;
+				}
+
+				filteredNotifications.push(notificationObject);
+			}
+		});
+
+		// Update monitor with new notifications
+		setMonitor((prev) => ({
+			...prev,
+			notifications: filteredNotifications,
+		}));
+
+		onClose();
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onClose={onClose}
+			fullWidth
+			maxWidth="md"
+			sx={{
+				"& .MuiDialog-paper": {
+					width: `calc(80% - ${theme.spacing(40)})`,
+					maxWidth: `${theme.breakpoints.values.md - 70}px`,
+				},
+			}}
+		>
+			<DialogContent>
+				<Stack
+					direction="row"
+					sx={{
+						height: `calc(30vh - ${theme.spacing(20)})`,
+					}}
+				>
+					{/* Left sidebar with tabs */}
+					<Box
+						sx={{
+							borderRight: 1,
+							borderColor: theme.palette.primary.lowContrast,
+							width: "30%",
+							maxWidth: theme.spacing(120),
+							pr: theme.spacing(10),
+						}}
+					>
+						<Typography variant="h2">
+							{t("notifications.addOrEditNotifications")}
+						</Typography>
+
+						<Tabs
+							orientation="vertical"
+							variant="scrollable"
+							value={tabValue}
+							onChange={handleChangeTab}
+							aria-label="Notification tabs"
+						>
+							{activeNotificationTypes.map((type) => (
+								<Tab
+									key={type.id}
+									label={type.label}
+									orientation="vertical"
+									disableRipple
+								/>
+							))}
+						</Tabs>
+					</Box>
+
+					{/* Right side content */}
+					<Box
+						sx={{
+							flex: 1,
+							pl: theme.spacing(7.5),
+							overflowY: "auto",
+						}}
+					>
+						{activeNotificationTypes.map((type, index) => (
+							<TabPanel
+								key={type.id}
+								value={tabValue}
+								index={index}
+							>
+								<TabComponent
+									type={type}
+									integrations={integrations}
+									handleIntegrationChange={handleIntegrationChange}
+									handleInputChange={handleInputChange}
+									handleTestNotification={handleTestNotification}
+									isLoading={loading}
+								/>
+							</TabPanel>
+						))}
+					</Box>
+				</Stack>
+			</DialogContent>
+			<DialogActions
+				sx={{
+					p: theme.spacing(4),
+					display: "flex",
+					justifyContent: "flex-end",
+					mb: theme.spacing(5),
+					mr: theme.spacing(5),
+				}}
+			>
+				<Button
+					variant="contained"
+					color="accent"
+					onClick={handleSave}
+					loading={loading}
+					sx={{
+						width: "auto",
+						minWidth: theme.spacing(60),
+						px: theme.spacing(8),
+					}}
+				>
+					{t("commonSave")}
+				</Button>
+			</DialogActions>
+		</Dialog>
+	);
+};
+
+NotificationIntegrationModal.propTypes = {
+	open: PropTypes.bool.isRequired,
+	onClose: PropTypes.func.isRequired,
+	monitor: PropTypes.object.isRequired,
+	setMonitor: PropTypes.func.isRequired,
+	notificationTypes: PropTypes.array,
+};
+
+export default NotificationIntegrationModal;

client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx

@@ -0,0 +1,115 @@
+import React from "react";
+import { Typography, Box, Button, CircularProgress } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useTheme } from "@emotion/react";
+import TextInput from "../../Inputs/TextInput/index.jsx";
+import Checkbox from "../../Inputs/Checkbox/index.jsx";
+
+const TabComponent = ({
+	type,
+	integrations,
+	handleIntegrationChange,
+	handleInputChange,
+	handleTestNotification,
+	isLoading,
+}) => {
+	const theme = useTheme();
+	const { t } = useTranslation();
+
+	// Helper to get the field state key (e.g., slackWebhook, telegramToken)
+	const getFieldKey = (typeId, fieldId) => {
+		return `${typeId}${fieldId.charAt(0).toUpperCase() + fieldId.slice(1)}`;
+	};
+
+	// Check if all fields have values to enable test button
+	const areAllFieldsFilled = () => {
+		return type.fields.every((field) => {
+			const fieldKey = getFieldKey(type.id, field.id);
+			return integrations[fieldKey];
+		});
+	};
+
+	return (
+		<>
+			<Typography
+				variant="subtitle1"
+				component="h4"
+				sx={{
+					fontWeight: "bold",
+					color: theme.palette.primary.contrastTextSecondary,
+				}}
+			>
+				{type.label}
+			</Typography>
+
+			<Typography
+				sx={{
+					mt: theme.spacing(0.5),
+					mb: theme.spacing(1.5),
+					color: theme.palette.primary.contrastTextTertiary,
+				}}
+			>
+				{type.description}
+			</Typography>
+
+			<Box sx={{ pl: theme.spacing(1.5) }}>
+				<Checkbox
+					id={`enable-${type.id}`}
+					label={t("notifications.enableNotifications", { platform: type.label })}
+					isChecked={integrations[type.id]}
+					onChange={(e) => handleIntegrationChange(type.id, e.target.checked)}
+					disabled={isLoading}
+				/>
+			</Box>
+
+			{type.fields.map((field) => {
+				const fieldKey = getFieldKey(type.id, field.id);
+
+				return (
+					<Box
+						key={field.id}
+						sx={{ mt: theme.spacing(1) }}
+					>
+						<Typography
+							sx={{
+								mb: theme.spacing(2),
+								fontWeight: "bold",
+								color: theme.palette.primary.contrastTextSecondary,
+							}}
+						>
+							{field.label}
+						</Typography>
+
+						<TextInput
+							id={`${type.id}-${field.id}`}
+							type={field.type}
+							placeholder={field.placeholder}
+							value={integrations[fieldKey]}
+							onChange={(e) => handleInputChange(fieldKey, e.target.value)}
+							disabled={!integrations[type.id] || isLoading}
+						/>
+					</Box>
+				);
+			})}
+
+			<Box sx={{ mt: theme.spacing(1) }}>
+				<Button
+					variant="text"
+					color="info"
+					onClick={() => handleTestNotification(type.id)}
+					disabled={!integrations[type.id] || !areAllFieldsFilled() || isLoading}
+				>
+					{isLoading ? (
+						<CircularProgress
+							size={theme.spacing(8)}
+							sx={{ mr: theme.spacing(1), color: theme.palette.accent.main }}
+						/>
+					) : null}
+					{t("notifications.testNotification")}
+				</Button>
+			</Box>
+		</>
+	);
+};
+
+export default TabComponent;

client/src/Components/v1/NotificationIntegrationModal/Components/TabPanel.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Box } from "@mui/material";
+import { useTheme } from "@emotion/react";
+
+/**
+ * TabPanel component that displays content for the selected tab.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to be displayed when this tab panel is selected.
+ * @param {number} props.value - The currently selected tab value.
+ * @param {number} props.index - The index of this specific tab panel.
+ * @param {Object} props.other - Any additional props to be spread to the root element.
+ * @returns {React.ReactElement|null} The rendered tab panel or null if not selected.
+ */
+function TabPanel({ children, value, index, ...other }) {
+	const theme = useTheme();
+
+	return (
+		<div
+			role="tabpanel"
+			hidden={value !== index}
+			id={`notification-tabpanel-${index}`}
+			aria-labelledby={`notification-tab-${index}`}
+			{...other}
+		>
+			{value === index && <Box sx={{ pt: theme.spacing(3) }}>{children}</Box>}
+		</div>
+	);
+}
+
+TabPanel.propTypes = {
+	children: PropTypes.node,
+
+	index: PropTypes.number.isRequired,
+
+	value: PropTypes.number.isRequired,
+};
+
+export default TabPanel;

client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { networkService } from "../../../../Utils/NetworkService.js";
+import { createToast } from "../../../../Utils/toastUtils.jsx";
+
+// Define constants for notification types to avoid magic values
+const NOTIFICATION_TYPES = {
+	SLACK: "slack",
+	DISCORD: "discord",
+	TELEGRAM: "telegram",
+	WEBHOOK: "webhook",
+};
+
+// Define constants for field IDs
+const FIELD_IDS = {
+	WEBHOOK: "webhook",
+	TOKEN: "token",
+	CHAT_ID: "chatId",
+	URL: "url",
+};
+
+/**
+ * Custom hook for notification-related operations
+ */
+const useNotifications = () => {
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState(undefined);
+	const { t } = useTranslation();
+
+	/**
+	 * Send a test notification
+	 * @param {string} type - The notification type (slack, discord, telegram, webhook)
+	 * @param {object} config - Configuration object with necessary params
+	 */
+	const sendTestNotification = async (type, config) => {
+		setLoading(true);
+		setError(undefined);
+
+		// Validation based on notification type
+		let payload = { platform: type };
+		let isValid = true;
+		let errorMessage = "";
+
+		switch (type) {
+			case NOTIFICATION_TYPES.SLACK:
+				payload.webhookUrl = config.webhook;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.slack.webhookRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.DISCORD:
+				payload.webhookUrl = config.webhook;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.discord.webhookRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.TELEGRAM:
+				payload.botToken = config.token;
+				payload.chatId = config.chatId;
+				if (
+					typeof payload.botToken === "undefined" ||
+					payload.botToken === "" ||
+					typeof payload.chatId === "undefined" ||
+					payload.chatId === ""
+				) {
+					isValid = false;
+					errorMessage = t("notifications.telegram.fieldsRequired");
+				}
+				break;
+
+			case NOTIFICATION_TYPES.WEBHOOK:
+				payload.webhookUrl = config.url;
+				payload.platform = NOTIFICATION_TYPES.SLACK;
+				if (typeof payload.webhookUrl === "undefined" || payload.webhookUrl === "") {
+					isValid = false;
+					errorMessage = t("notifications.webhook.urlRequired");
+				}
+				break;
+
+			default:
+				isValid = false;
+				errorMessage = t("notifications.unsupportedType");
+		}
+
+		// If validation fails, show error and return
+		if (isValid === false) {
+			createToast({
+				body: errorMessage,
+				variant: "error",
+			});
+			setLoading(false);
+			return;
+		}
+
+		try {
+			const response = await networkService.testNotification({
+				platform: type,
+				payload: payload,
+			});
+
+			if (response.data.success === true) {
+				createToast({
+					body: t("notifications.testSuccess"),
+					variant: "info",
+				});
+			} else {
+				throw new Error(response.data.msg || t("notifications.testFailed"));
+			}
+		} catch (error) {
+			const errorMsg =
+				error.response?.data?.msg || error.message || t("notifications.networkError");
+			createToast({
+				body: `${t("notifications.testFailed")}: ${errorMsg}`,
+				variant: "error",
+			});
+			setError(errorMsg);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return [loading, error, sendTestNotification];
+};
+
+export default useNotifications;

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

@@ -1,7 +1,8 @@
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 import { Box, IconButton, LinearProgress, Stack, Typography } from "@mui/material";
-import Icon from "../Icon";
+import CloseIcon from "@mui/icons-material/Close";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
 import "./index.css";
 
 /**
@@ -50,10 +51,7 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 				alignItems={error ? "center" : "flex-start"}
 			>
 				{error ? (
-					<Icon
+					<ErrorOutlineOutlinedIcon />
-						name="AlertTriangle"
-						size={20}
-					/>
 				) : icon ? (
 					<Box
 						sx={{
@@ -129,9 +127,10 @@ const ProgressUpload = ({ icon, label, size, progress = 0, onClick, error }) =>
 								}
 					}
 				>
-					<Icon
+					<CloseIcon
-						name="X"
+						sx={{
-						size={20}
+							fontSize: "20px",
+						}}
 					/>
 				</IconButton>
 			</Stack>

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

@@ -1,22 +1,15 @@
 import React from "react";
 import { Step, Stepper, StepLabel, Typography } from "@mui/material";
-import Icon from "../Icon";
+import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
+import CheckCircle from "@mui/icons-material/CheckCircle";
 import PropTypes from "prop-types";
 
 const CustomStepIcon = (props) => {
 	const { completed, active } = props;
 	return completed ? (
-		<Icon
+		<CheckCircle color="accent" />
-			name="CheckCircle2"
-			size={24}
-			color="accent.main"
-		/>
 	) : (
-		<Icon
+		<RadioButtonCheckedIcon color={active ? "accent" : "disabled"} />
-			name="Circle"
-			size={24}
-			color={active ? "accent.main" : "text.disabled"}
-		/>
 	);
 };
 

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

@@ -1,5 +1,5 @@
 import html2canvas from "html2canvas";
-import Icon from "../Icon";
+import ShareIcon from "@mui/icons-material/Share";
 import { Button } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -55,13 +55,7 @@ const ShareComponent = ({ elementToCapture, fileName = "screenshot" }) => {
 	return (
 		<Button
 			variant="outlined"
-			startIcon={
+			startIcon={<ShareIcon sx={{ color: theme.palette.success.main }} />}
-				<Icon
-					name="Share2"
-					size={18}
-					color="success.main"
-				/>
-			}
 			color="success"
 			onClick={captureAndShare}
 		>

client/src/Components/v1/Sidebar/components/authFooter.jsx

@@ -7,7 +7,8 @@ import Avatar from "../../Avatar/index.jsx";
 import Menu from "@mui/material/Menu";
 import MenuItem from "@mui/material/MenuItem";
 import Divider from "@mui/material/Divider";
-import Icon from "../../Icon";
+import DotsVertical from "../../../../assets/icons/dots-vertical.svg?react";
+import LogoutSvg from "../../../../assets/icons/logout.svg?react";
 
 import { useTheme } from "@emotion/react";
 import { useSelector } from "react-redux";
@@ -80,10 +81,6 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 					gap: theme.spacing(2),
 					borderRadius: theme.shape.borderRadius,
 					pl: theme.spacing(4),
-					color: theme.palette.primary.contrastTextTertiary,
-					"& svg": {
-						stroke: theme.palette.primary.contrastTextTertiary,
-					},
 				}}
 			>
 				{item.icon}
@@ -163,14 +160,19 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 							ml: "50px",
 							"&:focus": { outline: "none" },
 							alignSelf: "center",
+
+							"& svg": {
+								width: "22px",
+								height: "22px",
+							},
+							"& svg path": {
+								/* Vertical three dots */
+								stroke: theme.palette.primary.contrastTextTertiary,
+							},
 						}}
 						onClick={(event) => openPopup(event)}
 					>
-						<Icon
+						<DotsVertical />
-							name="MoreVertical"
-							size={22}
-							color="primary.contrastTextTertiary"
-						/>
 					</IconButton>
 				</Tooltip>
 			</Stack>
@@ -254,13 +256,12 @@ const AuthFooter = ({ collapsed, accountMenuItems }) => {
 						gap: theme.spacing(4),
 						borderRadius: theme.shape.borderRadius,
 						pl: theme.spacing(4),
+						"& svg path": {
+							stroke: theme.palette.primary.contrastTextTertiary,
+						},
 					}}
 				>
-					<Icon
+					<LogoutSvg />
-						name="LogOut"
-						size={20}
-						color="primary.contrastTextTertiary"
-					/>
 					{t("menu.logOut", "Log out")}
 				</MenuItem>
 			</Menu>

client/src/Components/v1/Sidebar/components/navItem.jsx

@@ -52,11 +52,12 @@ const NavItem = ({ item, collapsed, selected, onClick }) => {
 				<ListItemIcon
 					sx={{
 						minWidth: 0,
-						color: iconStroke,
 						"& svg": {
 							height: 20,
 							width: 20,
 							opacity: 0.81,
+						},
+						"& svg path": {
 							stroke: iconStroke,
 						},
 					}}

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

@@ -8,13 +8,28 @@ import NavItem from "./components/navItem.jsx";
 import AuthFooter from "./components/authFooter.jsx";
 
 import StarPrompt from "../StarPrompt/index.jsx";
-import Icon from "../Icon";
+import LockSvg from "../../../assets/icons/lock.svg?react";
+import UserSvg from "../../../assets/icons/user.svg?react";
+import TeamSvg from "../../../assets/icons/user-two.svg?react";
+import Support from "../../../assets/icons/support.svg?react";
+import Maintenance from "../../../assets/icons/maintenance.svg?react";
+import Monitors from "../../../assets/icons/monitors.svg?react";
+import Incidents from "../../../assets/icons/incidents.svg?react";
+import Integrations from "../../../assets/icons/integrations.svg?react";
+import PageSpeed from "../../../assets/icons/page-speed.svg?react";
+import Settings from "../../../assets/icons/settings.svg?react";
+import ChangeLog from "../../../assets/icons/changeLog.svg?react";
+import Docs from "../../../assets/icons/docs.svg?react";
+import StatusPages from "../../../assets/icons/status-pages.svg?react";
+import Discussions from "../../../assets/icons/discussions.svg?react";
+import Notifications from "../../../assets/icons/notifications.svg?react";
+import Logs from "../../../assets/icons/logs.svg?react";
 
 // Utils
 import { useTheme } from "@mui/material/styles";
+import { useSelector } from "react-redux";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
-import { useSidebar } from "@/Hooks/useSidebar.js";
 
 const URL_MAP = {
 	support: "https://discord.com/invite/NAb6H3UTjK",
@@ -24,48 +39,52 @@ const URL_MAP = {
 };
 
 const getMenu = (t) => [
-	{ name: t("menu.uptime"), path: "uptime", icon: <Icon name="Globe" /> },
+	{ name: t("menu.uptime"), path: "uptime", icon: <Monitors /> },
-	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <Icon name="Gauge" /> },
+	{ name: t("menu.pagespeed"), path: "pagespeed", icon: <PageSpeed /> },
-	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Icon name="Link" /> },
+
+	{ name: t("menu.infrastructure"), path: "infrastructure", icon: <Integrations /> },
 	{
 		name: t("menu.notifications"),
 		path: "notifications",
-		icon: <Icon name="Bell" />,
+		icon: <Notifications />,
 	},
-	{ name: t("menu.checks"), path: "checks", icon: <Icon name="FileText" /> },
+	{ name: t("menu.checks"), path: "checks", icon: <Docs /> },
-	{ name: t("menu.incidents"), path: "incidents", icon: <Icon name="AlertTriangle" /> },
+	{ name: t("menu.incidents"), path: "incidents", icon: <Incidents /> },
-	{ name: t("menu.statusPages"), path: "status", icon: <Icon name="Wifi" /> },
+
-	{ name: t("menu.maintenance"), path: "maintenance", icon: <Icon name="Wrench" /> },
+	{ name: t("menu.statusPages"), path: "status", icon: <StatusPages /> },
-	{ name: t("menu.logs"), path: "logs", icon: <Icon name="Database" /> },
+	{ name: t("menu.maintenance"), path: "maintenance", icon: <Maintenance /> },
+	{ name: t("menu.logs"), path: "logs", icon: <Logs /> },
+
 	{
 		name: t("menu.settings"),
-		icon: <Icon name="Settings" />,
+		icon: <Settings />,
 		path: "settings",
 	},
 ];
 
 const getOtherMenuItems = (t) => [
-	{ name: t("menu.support"), path: "support", icon: <Icon name="HelpCircle" /> },
+	{ name: t("menu.support"), path: "support", icon: <Support /> },
 	{
 		name: t("menu.discussions"),
 		path: "discussions",
-		icon: <Icon name="MessageCircle" />,
+		icon: <Discussions />,
 	},
-	{ name: t("menu.docs"), path: "docs", icon: <Icon name="FileText" /> },
+	{ name: t("menu.docs"), path: "docs", icon: <Docs /> },
-	{ name: t("menu.changelog"), path: "changelog", icon: <Icon name="Code" /> },
+	{ name: t("menu.changelog"), path: "changelog", icon: <ChangeLog /> },
 ];
 
 const getAccountMenuItems = (t) => [
-	{ name: t("menu.profile"), path: "account/profile", icon: <Icon name="User" /> },
+	{ name: t("menu.profile"), path: "account/profile", icon: <UserSvg /> },
-	{ name: t("menu.password"), path: "account/password", icon: <Icon name="Lock" /> },
+	{ name: t("menu.password"), path: "account/password", icon: <LockSvg /> },
-	{ name: t("menu.team"), path: "account/team", icon: <Icon name="Users" /> },
+	{ name: t("menu.team"), path: "account/team", icon: <TeamSvg /> },
 ];
 
 const Sidebar = () => {
 	const theme = useTheme();
 	const { t } = useTranslation();
 	const navigate = useNavigate();
-	const { collapsed, width, transition } = useSidebar();
+	// Redux state
+	const collapsed = useSelector((state) => state.ui.sidebar?.collapsed ?? false);
 
 	const menu = getMenu(t);
 	const otherMenuItems = getOtherMenuItems(t);
@@ -74,19 +93,20 @@ const Sidebar = () => {
 	return (
 		<Stack
 			height="100vh"
-			width={width}
+			width={
+				collapsed
+					? "var(--env-var-side-bar-collapsed-width)"
+					: "var(--env-var-side-bar-width)"
+			}
 			component="aside"
-			position="fixed"
+			position="sticky"
 			top={0}
-			left={0}
+			borderRight={`1px solid ${theme.palette.primary.lowContrast}`}
 			paddingTop={theme.spacing(6)}
 			paddingBottom={theme.spacing(6)}
 			gap={theme.spacing(6)}
 			sx={{
-				transition,
+				transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
-				backgroundColor: theme.palette.background.main,
-				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
-				zIndex: 1000,
 			}}
 		>
 			<CollapseButton collapsed={collapsed} />

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

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography, IconButton, Stack, Box } from "@mui/material";
-import Icon from "../Icon";
+import CloseIcon from "@mui/icons-material/Close";
 import { useTheme } from "@emotion/react";
 import { useSelector, useDispatch } from "react-redux";
 import { useTranslation } from "react-i18next";
@@ -67,10 +67,7 @@ const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" })
 						},
 					}}
 				>
-					<Icon
+					<CloseIcon sx={{ fontSize: "1.25rem" }} />
-						name="X"
-						size={20}
-					/>
 				</IconButton>
 			</Stack>
 

client/src/Components/v1/Table/TablePagination/index.jsx

@@ -2,7 +2,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Stack, TablePagination, Typography } from "@mui/material";
 import { TablePaginationActions } from "./Actions/index.jsx";
-import Icon from "../../Icon";
+import SelectorVertical from "../../../../assets/icons/selector-vertical.svg?react";
 
 Pagination.propTypes = {
 	paginationLabel: PropTypes.string, // Label for the pagination.
@@ -100,12 +100,7 @@ function Pagination({
 							},
 						},
 						inputProps: { id: "pagination-dropdown" },
-						IconComponent: () => (
+						IconComponent: SelectorVertical,
-							<Icon
-								name="ChevronsUpDown"
-								size={16}
-							/>
-						),
 						sx: {
 							ml: theme.spacing(4),
 							mr: theme.spacing(12),

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

@@ -5,7 +5,7 @@ import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { Link as RouterLink } from "react-router-dom";
 
-const TextLink = ({ text, linkText, href, state, target = "_self" }) => {
+const TextLink = ({ text, linkText, href, target = "_self" }) => {
 	const theme = useTheme();
 
 	return (
@@ -19,7 +19,6 @@ const TextLink = ({ text, linkText, href, state, target = "_self" }) => {
 				to={href}
 				component={RouterLink}
 				target={target}
-				state={state}
 			>
 				{linkText}
 			</Link>
@@ -31,7 +30,6 @@ TextLink.propTypes = {
 	text: PropTypes.string,
 	linkText: PropTypes.string,
 	href: PropTypes.string,
-	state: PropTypes.object,
 	target: PropTypes.string,
 };
 

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

@@ -3,31 +3,19 @@ import IconButton from "@mui/material/IconButton";
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import ToastBody from "./body.jsx";
-import Icon from "../Icon";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined";
+import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 
 // Utils
 import { useTheme } from "@emotion/react";
 import PropTypes from "prop-types";
 
 const icons = {
-	info: (
+	info: <InfoOutlinedIcon />,
-		<Icon
+	error: <ErrorOutlineOutlinedIcon />,
-			name="Info"
+	warning: <WarningAmberOutlinedIcon />,
-			size={24}
-		/>
-	),
-	error: (
-		<Icon
-			name="AlertCircle"
-			size={24}
-		/>
-	),
-	warning: (
-		<Icon
-			name="AlertTriangle"
-			size={24}
-		/>
-	),
 };
 
 const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
@@ -62,10 +50,7 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
 				)}
 				{title && (
 					<IconButton onClick={onClick}>
-						<Icon
+						<CloseIcon />
-							name="X"
-							size={20}
-						/>
 					</IconButton>
 				)}
 			</Stack>
@@ -78,10 +63,7 @@ const Toast = ({ variant, title, body, onClick, hasDismiss, hasIcon }) => {
 				<ToastBody body={body} />
 				{!title && (
 					<IconButton onClick={onClick}>
-						<Icon
+						<CloseIcon />
-							name="X"
-							size={20}
-						/>
 					</IconButton>
 				)}
 			</Stack>

client/src/Components/v2/actions-menu/index.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from "react";
-import Menu from "@mui/material/Menu";
-import MenuItem from "@mui/material/MenuItem";
-import IconButton from "@mui/material/IconButton";
-import { Settings } from "lucide-react";
-
-export type ActionMenuItem = {
-	id: number | string;
-	label: React.ReactNode;
-	action: Function;
-	closeMenu?: boolean;
-};
-
-export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => {
-	const [anchorEl, setAnchorEl] = useState<null | any>(null);
-	const open = Boolean(anchorEl);
-
-	const handleClick = (e: React.MouseEvent<any>) => {
-		e.stopPropagation();
-		setAnchorEl(e.currentTarget);
-	};
-
-	const handleClose = (e: React.MouseEvent<any>) => {
-		e.stopPropagation();
-		setAnchorEl(null);
-	};
-
-	return (
-		<div>
-			<IconButton onClick={handleClick}>
-				<Settings
-					size={20}
-					strokeWidth={1.5}
-				/>
-			</IconButton>
-			<Menu
-				anchorEl={anchorEl}
-				open={open}
-				onClose={handleClose}
-			>
-				{items.map((item) => (
-					<MenuItem
-						key={item.id}
-						onClick={(e: React.MouseEvent<HTMLLIElement>) => {
-							e.stopPropagation();
-							if (item.closeMenu) handleClose(e);
-							item.action();
-						}}
-					>
-						{item.label}
-					</MenuItem>
-				))}
-			</Menu>
-		</div>
-	);
-};

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

@@ -1,140 +0,0 @@
-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 type { SxProps } from "@mui/material/styles";
-import type { ResponsiveStyleValue } from "@mui/system";
-
-interface PlaceholderCheck {
-	status: "placeholder";
-	responseTime: 0;
-	createdAt: "";
-}
-
-interface HeatmapResponseTimeProps {
-	checks: CheckSnapshot[];
-	gap?: ResponsiveStyleValue<number | string>;
-	availabilityCellSx?: SxProps;
-	responseCellSx?: SxProps;
-}
-
-export const HeatmapResponseTime = ({
-	checks,
-	gap,
-	availabilityCellSx,
-	responseCellSx,
-}: HeatmapResponseTimeProps) => {
-	const theme = useTheme();
-	if (!gap) {
-		gap = theme.spacing(0.5);
-	}
-
-	if (!checks || checks.length === 0) return null;
-
-	const latestChecks = checks.slice(-25).reverse();
-
-	let data: Array<CheckSnapshot | PlaceholderCheck>;
-	if (latestChecks.length !== 25) {
-		const placeholders = Array(25 - latestChecks.length).fill({
-			status: "placeholder" as const,
-		});
-		data = [...latestChecks, ...placeholders];
-	} else {
-		data = latestChecks;
-	}
-	return (
-		<Box sx={{ width: "100%" }}>
-			<Box
-				sx={{
-					width: "100%",
-					display: "grid",
-					gridTemplateColumns: "repeat(25, 1fr)",
-					gap: gap,
-					alignItems: "stretch",
-				}}
-			>
-				{data.map((check, index) => {
-					const statusBg =
-						check.status === "placeholder"
-							? theme.palette.action.hover
-							: check.status === true
-								? theme.palette.success.light
-								: theme.palette.error.light;
-					const respBg =
-						check.status === "placeholder"
-							? theme.palette.action.hover
-							: getResponseColor(check.responseTime || 0, {
-									start: theme.palette.success.main,
-									mid: theme.palette.warning.main,
-									end: theme.palette.error.main,
-								});
-					const statusBorder =
-						check.status === "placeholder"
-							? theme.palette.divider
-							: check.status === true
-								? theme.palette.success.main
-								: theme.palette.error.main;
-
-					return (
-						<HeatmapResponseTimeTooltip
-							key={`${check}-${index}`}
-							check={check}
-						>
-							<Box
-								sx={{
-									display: "grid",
-									gridTemplateRows: "auto auto",
-								}}
-							>
-								<Box
-									sx={{
-										display: "flex",
-										flexDirection: "column",
-										gap: theme.spacing(2),
-									}}
-								>
-									<Box
-										sx={{
-											position: "relative",
-											width: "100%",
-											aspectRatio: "10",
-										}}
-									>
-										<Box
-											sx={{
-												position: "absolute",
-												inset: 0,
-												bgcolor: statusBg,
-												borderRadius: theme.spacing(0.5),
-												...availabilityCellSx,
-											}}
-										/>
-										<Box
-											sx={{
-												position: "absolute",
-												inset: 0,
-												pointerEvents: "none",
-												borderRadius: theme.spacing(0.5),
-												boxShadow: `inset 0 0 0 2px ${statusBorder}`,
-											}}
-										/>
-									</Box>
-									<Box
-										sx={{
-											width: "100%",
-											aspectRatio: "1 / 1",
-											bgcolor: respBg,
-											borderRadius: theme.spacing(0.5),
-											...responseCellSx,
-										}}
-									/>
-								</Box>
-							</Box>
-						</HeatmapResponseTimeTooltip>
-					);
-				})}
-			</Box>
-		</Box>
-	);
-};

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

@@ -1,76 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Tooltip from "@mui/material/Tooltip";
-import Typography from "@mui/material/Typography";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { CheckSnapshot } from "@/Types/Check";
-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: "" };
-
-export const HeatmapResponseTimeTooltip = ({
-	children,
-	check,
-}: {
-	children: React.ReactElement;
-	check: HeatmapCheck;
-}) => {
-	const { t } = useTranslation();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const theme = useTheme();
-
-	const getColor = (status: boolean) => {
-		if (status === true) return theme.palette.success.light;
-		if (status === false) return theme.palette.error.light;
-	};
-
-	if (check.status === "placeholder") {
-		return children;
-	}
-
-	return (
-		<Tooltip
-			slotProps={{
-				tooltip: {
-					sx: {
-						backgroundColor: "transparent",
-						color: "inherit",
-						boxShadow: "none",
-					},
-				},
-			}}
-			title={
-				<Stack
-					sx={{
-						backgroundColor: theme.palette.secondary.main,
-						border: 1,
-						borderColor: theme.palette.divider,
-						borderRadius: theme.shape.borderRadius,
-						p: theme.spacing(4),
-					}}
-				>
-					<Typography>
-						{formatDateWithTz(check?.createdAt, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
-					</Typography>
-					<Typography>
-						{t("common.labels.responseTime")}: {check.originalResponseTime.toFixed()} ms
-					</Typography>
-					<Typography textTransform={"capitalize"}>
-						Status:{" "}
-						<span style={{ color: getColor(check?.status) }}>
-							{check?.status === true
-								? t("pages.common.monitors.status.up")
-								: t("pages.common.monitors.status.down")}
-						</span>
-					</Typography>
-				</Stack>
-			}
-		>
-			{children}
-		</Tooltip>
-	);
-};

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

@@ -1,102 +0,0 @@
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-import type { ResponsiveStyleValue } from "@mui/system";
-import type { CheckSnapshot } from "@/Types/Check";
-import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
-
-interface HistogramResponseTimeProps {
-	checks: CheckSnapshot[];
-	height?: ResponsiveStyleValue<number | string>;
-	gap?: ResponsiveStyleValue<number | string>;
-}
-
-const DEFAULT_HEIGHT = 50;
-
-export const HistogramResponseTime = ({
-	checks,
-	height = DEFAULT_HEIGHT,
-	gap,
-}: HistogramResponseTimeProps) => {
-	const theme = useTheme();
-
-	if (!Array.isArray(checks) || checks.length === 0) return null;
-
-	let data = Array<any>();
-
-	if (!checks || checks.length === 0) {
-		data = [];
-	}
-	if (checks.length !== 25) {
-		const placeholders = Array(25 - checks.length).fill({
-			status: "placeholder",
-		});
-		data = [...checks, ...placeholders];
-	} else {
-		data = checks;
-	}
-	const chartHeight = typeof height === "number" ? `${height}px` : height;
-	const gridGap = gap ?? theme.spacing(0.5);
-	return (
-		<Box sx={{ width: "100%" }}>
-			<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>
-	);
-};

client/src/Components/v2/common/controls/HeaderCreate.tsx

@@ -1,47 +0,0 @@
-import { Stack } from "@mui/material";
-import { useNavigate } from "react-router-dom";
-import { ButtonInput } from "../../inputs/Button";
-import { useTranslation } from "react-i18next";
-
-interface HeaderCreateProps {
-	label?: string;
-	path: string;
-	isLoading?: boolean;
-	isAdmin?: boolean;
-}
-
-export const HeaderCreate = ({
-	label,
-	path,
-	isLoading = false,
-	isAdmin = false,
-}: HeaderCreateProps) => {
-	const navigate = useNavigate();
-	const { t } = useTranslation();
-
-	if (!isAdmin) {
-		return null;
-	}
-
-	const handleClick = () => {
-		navigate(path);
-	};
-
-	return (
-		<Stack
-			direction="row"
-			justifyContent="flex-end"
-			alignItems="center"
-			width="100%"
-		>
-			<ButtonInput
-				variant="contained"
-				color="primary"
-				onClick={handleClick}
-				loading={isLoading}
-			>
-				{label || t("common.buttons.create")}
-			</ButtonInput>
-		</Stack>
-	);
-};

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

@@ -1,82 +0,0 @@
-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 { 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;
-	hasDateRange?: boolean;
-	dateRange: string;
-	setDateRange: (dateRange: string) => void;
-}
-
-export const HeaderTimeRange = ({
-	isLoading = false,
-	hasDateRange = true,
-	dateRange,
-	setDateRange,
-}: MonitorTimeFrameHeaderProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
-	const handleChange = (
-		_event: React.MouseEvent<HTMLElement>,
-		newValue: string | null
-	) => {
-		if (newValue !== null) {
-			setDateRange(newValue);
-		}
-	};
-
-	let timeFramePicker = null;
-
-	if (hasDateRange) {
-		timeFramePicker = (
-			<ToggleButtonGroup
-				orientation={isSmallScreen ? "vertical" : "horizontal"}
-				value={dateRange}
-				exclusive
-				onChange={handleChange}
-				size="small"
-				fullWidth={isSmallScreen}
-			>
-				<ToggleButton value="recent">
-					{t("components.headerTimeRange.labels.recent")}
-				</ToggleButton>
-				<ToggleButton value="day">
-					{t("components.headerTimeRange.labels.day")}
-				</ToggleButton>
-				<ToggleButton value="week">
-					{t("components.headerTimeRange.labels.week")}
-				</ToggleButton>
-				<ToggleButton value="month">
-					{t("components.headerTimeRange.labels.month")}
-				</ToggleButton>
-			</ToggleButtonGroup>
-		);
-	}
-
-	return (
-		<Stack
-			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">
-				{t(`components.headerTimeRange.description.${dateRange}`)}
-			</Typography>
-			{timeFramePicker}
-		</Stack>
-	);
-};

client/src/Components/v2/common/index.ts

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

client/src/Components/v2/design-elements/BaseBox.tsx

@@ -1,19 +0,0 @@
-import Box, { type BoxProps } from "@mui/material/Box";
-import { useTheme } from "@mui/material/styles";
-
-export const BaseBox = ({ sx, ...rest }: BoxProps) => {
-	const theme = useTheme();
-	return (
-		<Box
-			{...rest}
-			sx={{
-				backgroundColor: theme.palette.background.paper,
-				border: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.divider,
-				borderRadius: theme.shape.borderRadius,
-				...sx,
-			}}
-		/>
-	);
-};

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

@@ -1,72 +0,0 @@
-import { BaseBox } from "../design-elements";
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import type { ResponsiveStyleValue } from "@mui/system";
-
-import { useTheme } from "@mui/material/styles";
-
-type BaseChartProps = React.PropsWithChildren<{
-	icon: React.ReactNode;
-	title: string;
-	width?: number | string;
-	maxWidth?: number | string;
-	padding?: number | string | ResponsiveStyleValue<number | string>;
-}>;
-
-export const BaseChart = ({
-	children,
-	icon,
-	title,
-	width = "100%",
-	maxWidth = "100%",
-	padding,
-}: BaseChartProps) => {
-	const theme = useTheme();
-	return (
-		<BaseBox
-			sx={{
-				padding: padding ?? theme.spacing(8),
-				display: "flex",
-				flex: 1,
-				width: width,
-				maxWidth: maxWidth,
-			}}
-		>
-			<Stack
-				gap={theme.spacing(8)}
-				flex={1}
-			>
-				<Stack
-					direction="row"
-					alignItems={"center"}
-					gap={theme.spacing(4)}
-				>
-					{icon && (
-						<BaseBox
-							sx={{
-								display: "flex",
-								alignItems: "center",
-								justifyContent: "center",
-								width: 34,
-								height: 34,
-								backgroundColor: theme.palette.action.hover,
-								"& svg": {
-									width: 20,
-									height: 20,
-									"& path": {
-										stroke: theme.palette.text.secondary,
-									},
-								},
-							}}
-						>
-							{icon}
-						</BaseBox>
-					)}
-					<Typography variant="h2">{title}</Typography>
-				</Stack>
-				<Box flex={1}>{children}</Box>
-			</Stack>
-		</BaseBox>
-	);
-};

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

@@ -1,264 +0,0 @@
-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 {
-	ErrorFallback,
-	EmptyFallback,
-	EmptyMonitorFallback,
-	BaseFallback,
-} from "@/Components/v2/design-elements/Fallback";
-import { Breadcrumb } from "@/Components/v2/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";
-import { Trans, useTranslation } from "react-i18next";
-import { Link as RouterLink } from "react-router-dom";
-import { Typography } from "@mui/material";
-
-export const PageSpeedKeyPriorityFallback = () => {
-	return (
-		<BaseFallback>
-			<Alert
-				severity="warning"
-				sx={{
-					width: "100%",
-					maxWidth: 600,
-				}}
-			>
-				<Typography>
-					<Trans
-						i18nKey="common.alerts.pageSpeedApiKey.content"
-						components={{
-							settingsLink: (
-								<Link
-									component={RouterLink}
-									to="/settings"
-									color="inherit"
-									fontWeight="inherit"
-								/>
-							),
-						}}
-					/>
-				</Typography>
-			</Alert>
-		</BaseFallback>
-	);
-};
-
-interface BasePageProps extends StackProps {
-	loading?: boolean;
-	error?: boolean;
-	children: React.ReactNode;
-	breadcrumbOverride?: string[];
-}
-
-export const BasePage = ({
-	loading,
-	error,
-	children,
-	breadcrumbOverride,
-	...props
-}: BasePageProps) => {
-	const theme = useTheme();
-
-	if (loading) {
-		return (
-			<Stack
-				alignItems="center"
-				justifyContent="center"
-				sx={{ height: "100%" }}
-			>
-				<CircularProgress
-					color="primary"
-					size={28}
-				/>
-			</Stack>
-		);
-	}
-
-	if (error) {
-		return (
-			<ErrorFallback
-				title="Something went wrong..."
-				subtitle="Please try again later"
-			/>
-		);
-	}
-
-	return (
-		<Stack
-			spacing={theme.spacing(10)}
-			{...props}
-		>
-			<Breadcrumb breadcrumbOverride={breadcrumbOverride} />
-			{children}
-		</Stack>
-	);
-};
-
-interface BasePageWithStatesProps extends StackProps {
-	loading: boolean;
-	error: any;
-	totalCount: number;
-	bullets: string[] | unknown;
-	page: string;
-	actionButtonText: string;
-	actionLink: string;
-	children: React.ReactNode;
-}
-
-export const BasePageWithStates = ({
-	loading,
-	error,
-	totalCount,
-	page,
-	bullets,
-	actionButtonText,
-	actionLink,
-	children,
-	...props
-}: BasePageWithStatesProps) => {
-	const showLoading = loading && totalCount === 0;
-
-	if (!loading && totalCount === 0) {
-		return (
-			<EmptyFallback
-				bullets={bullets}
-				title={page}
-				actionButtonText={actionButtonText}
-				actionLink={actionLink}
-			/>
-		);
-	}
-
-	return (
-		<BasePage
-			loading={showLoading}
-			error={error}
-			{...props}
-		>
-			{children}
-		</BasePage>
-	);
-};
-
-interface MonitorBasePageWithStatesProps extends StackProps {
-	loading: boolean;
-	error: any;
-	totalCount: number;
-	page: string;
-	actionLink?: string;
-	children: React.ReactNode;
-	priorityFallback?: React.ReactNode;
-}
-
-export const MonitorBasePageWithStates = ({
-	loading,
-	error,
-	totalCount,
-	page,
-	actionLink,
-	children,
-	priorityFallback,
-	...props
-}: MonitorBasePageWithStatesProps) => {
-	const { t } = useTranslation();
-
-	const showLoading = loading && totalCount === 0;
-
-	if (priorityFallback) {
-		return (
-			<BasePage
-				loading={loading}
-				error={error}
-				{...props}
-			>
-				{priorityFallback}
-			</BasePage>
-		);
-	}
-
-	if (!loading && totalCount === 0) {
-		return (
-			<EmptyMonitorFallback
-				page={page}
-				title={t(`pages.${page}.fallback.title`)}
-				bullets={t(`pages.${page}.fallback.checks`, { returnObjects: true })}
-				actionButtonText={t(`pages.${page}.fallback.actionButton`)}
-				actionLink={actionLink || ""}
-			/>
-		);
-	}
-
-	return (
-		<BasePage
-			loading={showLoading}
-			error={error}
-			{...props}
-		>
-			{children}
-		</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/v2/design-elements/Breadcrumb.tsx

@@ -1,140 +0,0 @@
-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/v2/design-elements/BulletPointCheck.tsx

@@ -1,46 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { Check } from "lucide-react";
-import { useTheme } from "@mui/material/styles";
-
-export const BulletPointCheck = ({
-	text,
-	variant = "info",
-}: {
-	text: string;
-	noHighlightText?: string;
-	variant?: "success" | "error" | "info";
-}) => {
-	const theme = useTheme();
-	const colors: Record<string, string | undefined> = {
-		success: theme.palette.success.main,
-		error: theme.palette.error.main,
-		info: theme.palette.text.secondary,
-	};
-
-	return (
-		<Stack
-			direction="row"
-			gap={theme.spacing(6)}
-			alignItems="center"
-		>
-			<Check
-				size={16}
-				strokeWidth={1.5}
-				style={{
-					flexShrink: 0,
-				}}
-			/>
-			<Typography
-				component="span"
-				color={variant === "info" ? theme.palette.text.secondary : colors[variant]}
-				fontWeight={450}
-				sx={{
-					opacity: 0.9,
-				}}
-			>
-				{text}
-			</Typography>
-		</Stack>
-	);
-};

client/src/Components/v2/design-elements/Dot.tsx

@@ -1,23 +0,0 @@
-import type { CSSProperties } from "react";
-
-interface DotProps {
-	color?: string;
-	size?: string;
-	style?: CSSProperties;
-}
-
-export const Dot = ({ color = "gray", size = "4px", style }: DotProps) => {
-	return (
-		<span
-			style={{
-				content: '""',
-				width: size,
-				height: size,
-				borderRadius: "50%",
-				backgroundColor: color,
-				opacity: 0.8,
-				...style,
-			}}
-		/>
-	);
-};

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

@@ -1,180 +0,0 @@
-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 { useNavigate } from "react-router";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@mui/material/styles";
-import type { StackProps } from "@mui/material/Stack";
-
-interface BaseFallbackProps extends StackProps {
-	children: React.ReactNode;
-}
-
-export const BaseFallback = ({ children, ...props }: BaseFallbackProps) => {
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	return (
-		<Stack
-			alignItems={"center"}
-			margin={isSmall ? "inherit" : "auto"}
-			marginTop={isSmall ? "33%" : "10%"}
-			width={{
-				sm: "90%",
-				md: "70%",
-				lg: "50%",
-				xl: "40%",
-			}}
-			padding={{ xs: theme.spacing(8), md: theme.spacing(16) }}
-			bgcolor={theme.palette.background.paper}
-			border={1}
-			borderColor={theme.palette.divider}
-			borderRadius={theme.shape.borderRadius}
-			sx={{
-				borderStyle: "dashed",
-			}}
-			{...props}
-		>
-			<SkeletonCard showHalo={true} />
-			{children}
-		</Stack>
-	);
-};
-
-export const ErrorFallback = ({
-	title,
-	subtitle,
-}: {
-	title: string;
-	subtitle: string;
-}) => {
-	const theme = useTheme();
-	return (
-		<BaseFallback>
-			<Typography
-				variant="h1"
-				marginY={theme.spacing(4)}
-				color={theme.palette.text.secondary}
-			>
-				{title}
-			</Typography>
-			<Typography>{subtitle}</Typography>
-		</BaseFallback>
-	);
-};
-
-export const EmptyFallback = ({
-	title,
-	bullets,
-	actionButtonText,
-	actionLink,
-}: {
-	title: string;
-	bullets: any;
-	actionButtonText: string;
-	actionLink: string;
-}) => {
-	const theme = useTheme();
-	const navigate = useNavigate();
-	return (
-		<BaseFallback>
-			<Stack
-				gap={theme.spacing(10)}
-				zIndex={1}
-				alignItems="center"
-			>
-				<Typography
-					component="h1"
-					color={theme.palette.primary.contrastText}
-				>
-					{title}
-				</Typography>
-				<Stack
-					sx={{
-						flexWrap: "wrap",
-						gap: theme.spacing(2),
-						maxWidth: "1100px",
-						width: "100%",
-					}}
-				>
-					{Array.isArray(bullets) &&
-						bullets?.map((bullet: string) => (
-							<BulletPointCheck
-								text={bullet}
-								key={`${bullet}-${Math.random()}`}
-							/>
-						))}
-				</Stack>
-				<Stack>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={() => navigate(actionLink)}
-					>
-						{actionButtonText}
-					</Button>
-				</Stack>
-			</Stack>
-		</BaseFallback>
-	);
-};
-
-export const EmptyMonitorFallback = ({
-	page,
-	title,
-	bullets,
-	actionButtonText,
-	actionLink,
-}: {
-	page: string;
-	title: string;
-	bullets: any;
-	actionButtonText: string;
-	actionLink: string;
-}) => {
-	const theme = useTheme();
-	const navigate = useNavigate();
-	return (
-		<BaseFallback>
-			<Stack
-				gap={theme.spacing(10)}
-				zIndex={1}
-				alignItems="center"
-			>
-				<Typography
-					component="h1"
-					color={theme.palette.primary.contrastText}
-				>
-					{title}
-				</Typography>
-				<Stack
-					sx={{
-						flexWrap: "wrap",
-						gap: theme.spacing(2),
-						maxWidth: "1100px",
-						width: "100%",
-					}}
-				>
-					{Array.isArray(bullets) &&
-						bullets?.map((bullet: string, index: number) => (
-							<BulletPointCheck
-								text={bullet}
-								key={`${(page + "Monitors").trim().split(" ")[0]}-${index}`}
-							/>
-						))}
-				</Stack>
-				<Stack>
-					<Button
-						variant="contained"
-						color="primary"
-						onClick={() => navigate(actionLink)}
-					>
-						{actionButtonText}
-					</Button>
-				</Stack>
-			</Stack>
-		</BaseFallback>
-	);
-};

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

@@ -1,155 +0,0 @@
-import { BaseChart } from "@/Components/v2/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/v2/design-elements/Icon.tsx

@@ -1,18 +0,0 @@
-import type { LucideIcon } from "lucide-react";
-
-interface IconProps {
-	icon: LucideIcon;
-	size?: number;
-	strokeWidth?: number;
-}
-
-const Icon = ({ icon: Icon, size = 20, strokeWidth = 1.5 }: IconProps) => {
-	return (
-		<Icon
-			size={size}
-			strokeWidth={strokeWidth}
-		/>
-	);
-};
-
-export default Icon;

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

@@ -1,58 +0,0 @@
-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 { getStatusColor, formatUrl } from "@/Utils/MonitorUtils";
-import { useTheme } from "@mui/material/styles";
-import prettyMilliseconds from "pretty-ms";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
-import useMediaQuery from "@mui/material/useMediaQuery";
-export const MonitorStatus = ({ monitor }: { monitor: Monitor }) => {
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	if (!monitor) {
-		return null;
-	}
-	return (
-		<Stack>
-			<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>
-			<Stack
-				direction="row"
-				alignItems={"center"}
-				gap={theme.spacing(4)}
-			>
-				<PulseDot color={getStatusColor(monitor.status, theme)} />
-				<Typography
-					fontSize={typographyLevels.l}
-					fontWeight={"bolder"}
-					fontFamily={"monospace"}
-					overflow={"hidden"}
-					textOverflow={"ellipsis"}
-					whiteSpace={"nowrap"}
-					maxWidth={isSmall ? "100%" : "calc((100vw - var(--env-var-width-2)) / 2)"}
-				>
-					{formatUrl(monitor?.url)}
-				</Typography>
-				{!isSmall && (
-					<>
-						<Dot />
-						<Typography>
-							Checking every {prettyMilliseconds(monitor?.interval, { verbose: true })}
-						</Typography>
-					</>
-				)}
-			</Stack>
-		</Stack>
-	);
-};

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

@@ -1,48 +0,0 @@
-import { Box, Stack, useTheme } from "@mui/material";
-
-interface PulseDotProps {
-	color: string;
-}
-
-export const PulseDot = ({ color }: PulseDotProps) => {
-	const theme = useTheme();
-
-	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.background.paper,
-						top: "50%",
-						left: "50%",
-						transform: "translate(-50%, -50%)",
-					},
-				}}
-			/>
-		</Stack>
-	);
-};

client/src/Components/v2/design-elements/SkeletonCard.tsx

@@ -1,147 +0,0 @@
-import { Box, Stack, useTheme } from "@mui/material";
-
-interface SkeletonCardProps {
-	width?: number | string | { xs?: number | string; md?: number | string };
-	showHalo?: boolean;
-}
-
-export const SkeletonCard = ({
-	width = { xs: 130, md: 216 },
-	showHalo = true,
-}: SkeletonCardProps) => {
-	const theme = useTheme();
-	const pulseAnimation = {
-		"@keyframes pulse": {
-			"0%, 100%": { opacity: 1 },
-			"50%": { opacity: 0.72 },
-		},
-	};
-
-	const floatAnimation = {
-		"@keyframes float": {
-			"0%, 100%": { transform: "rotate(5deg) translate(12px, -20px)" },
-			"50%": { transform: "rotate(5deg) translate(12px, -24px)" },
-		},
-	};
-
-	const cardStyle = {
-		width: width,
-		height: 57,
-		borderRadius: theme.shape.borderRadius,
-		background:
-			theme.palette.mode === "dark"
-				? theme.palette.secondary.dark
-				: theme.palette.background.paper,
-		boxShadow:
-			theme.palette.mode === "dark"
-				? "0 8px 30px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.05) inset"
-				: "0 8px 30px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.05) inset",
-		display: "flex",
-		gap: theme.spacing(5),
-		alignItems: "center",
-		padding: theme.spacing(5),
-	};
-
-	const blockStyle = {
-		width: 55,
-		height: 34,
-		borderRadius: theme.shape.borderRadius,
-		background: theme.palette.secondary.main,
-		border: `1px solid ${theme.palette.divider}`,
-		animation: "pulse 1.6s ease-in-out infinite",
-		...pulseAnimation,
-	};
-
-	const lineStyle = {
-		height: 7,
-		borderRadius: theme.shape.borderRadius,
-		background: theme.palette.secondary.main,
-		border: `1px solid ${theme.palette.divider}`,
-		animation: "pulse 1.6s ease-in-out infinite",
-		...pulseAnimation,
-	};
-
-	return (
-		<Box
-			position={"relative"}
-			mt={20}
-			mb={20}
-		>
-			{showHalo && (
-				<Box
-					sx={{
-						position: "absolute",
-						inset: 0,
-						display: "grid",
-						placeItems: "center",
-						pointerEvents: "none",
-						"&::before": {
-							content: '""',
-							width: "260px",
-							height: "260px",
-							borderRadius: "999px",
-							background:
-								theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.05)" : "#fff",
-							filter: "blur(60px)",
-							opacity: 0.9,
-						},
-					}}
-					aria-hidden="true"
-				/>
-			)}
-
-			{/* Card stack */}
-			<Box sx={{ position: "relative", zIndex: 1 }}>
-				{/* Front card (now at bottom) */}
-				<Box sx={cardStyle}>
-					<Box sx={blockStyle} />
-					<Stack sx={{ flex: 1, gap: "12px" }}>
-						{/* Empty space to maintain card height */}
-					</Stack>
-				</Box>
-
-				{/* Back card A */}
-				<Box
-					sx={{
-						...cardStyle,
-						transform: "rotate(-4deg) translate(-12px, -12px)",
-						filter: "blur(.2px)",
-						position: "absolute",
-						left: 0,
-						top: 0,
-					}}
-					aria-hidden="true"
-				>
-					<Box sx={blockStyle} />
-					<Stack sx={{ flex: 1, gap: "12px" }}>
-						<Box sx={{ ...lineStyle, width: "60%" }} />
-						<Box sx={{ ...lineStyle, width: "80%" }} />
-						<Box sx={{ ...lineStyle, width: "40%" }} />
-					</Stack>
-				</Box>
-
-				{/* Back card B */}
-				<Box
-					sx={{
-						...cardStyle,
-						transform: "rotate(5deg) translate(12px, -20px)",
-						filter: "blur(.3px)",
-						position: "absolute",
-						left: 0,
-						top: 0,
-						animation: "float 3s ease-in-out 5",
-						...floatAnimation,
-					}}
-					aria-hidden="true"
-				>
-					<Box sx={blockStyle} />
-					<Stack sx={{ flex: 1, gap: "12px" }}>
-						<Box sx={{ ...lineStyle, width: "60%" }} />
-						<Box sx={{ ...lineStyle, width: "80%" }} />
-						<Box sx={{ ...lineStyle, width: "40%" }} />
-					</Stack>
-				</Box>
-			</Box>
-		</Box>
-	);
-};

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

@@ -1,78 +0,0 @@
-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/v2/design-elements/StatBox.tsx

@@ -1,86 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-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 { SxProps } from "@mui/material";
-
-type GradientBox = React.PropsWithChildren<{
-	palette?: PaletteKey;
-	sx?: SxProps;
-}>;
-
-export const GradientBox = ({ children, palette, sx }: GradientBox) => {
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isLight = theme.palette.mode === "light";
-	const paper = theme.palette.background.paper;
-	const paperStart = lighten(paper, isLight ? 0.06 : 0.08);
-	const paperEnd = paper;
-	const bg = palette
-		? `linear-gradient(135deg, ${theme.palette[palette].light} 0%, ${theme.palette[palette].main} 100%)`
-		: `linear-gradient(135deg, ${paperStart} 0%, ${paperEnd} 100%)`;
-
-	return (
-		<BaseBox
-			sx={{
-				padding: `${theme.spacing(4)} ${theme.spacing(8)}`,
-				width: isSmall ? `100%` : `calc(25% - (3 * ${theme.spacing(8)} / 4))`,
-				background: bg,
-				...sx,
-			}}
-		>
-			{children}
-		</BaseBox>
-	);
-};
-
-type StatBoxProps = React.PropsWithChildren<{
-	title: string;
-	subtitle: string;
-	palette?: PaletteKey;
-	sx?: SxProps;
-	tooltip?: string;
-	onClick?: () => void;
-}>;
-
-export const StatBox = ({
-	title,
-	subtitle,
-	palette,
-	children,
-	sx,
-	tooltip,
-	onClick,
-}: StatBoxProps) => {
-	const theme = useTheme();
-	const textColor = palette ? theme.palette[palette].contrastText : "inherit";
-
-	return (
-		<GradientBox
-			palette={palette}
-			sx={{
-				...(sx as object),
-				...(onClick ? { cursor: "pointer", "&:hover": { opacity: 0.95 } } : {}),
-			}}
-		>
-			<Stack onClick={onClick}>
-				<Box sx={{ display: "flex", alignItems: "center", gap: theme.spacing(2) }}>
-					<Typography color={textColor}>{title}</Typography>
-					{tooltip && (
-						<TooltipWithInfo
-							title={tooltip}
-							iconColor={textColor as string}
-							iconSize={14}
-						/>
-					)}
-				</Box>
-				<Typography color={textColor}>{subtitle}</Typography>
-				{children}
-			</Stack>
-		</GradientBox>
-	);
-};

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

@@ -1,152 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { BaseBox } from "@/Components/v2/design-elements";
-import Background from "@/assets/Images/background-grid.svg?react";
-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={{
-				overflow: "hidden",
-				position: "relative",
-				flex: 1,
-				padding: theme.spacing(4),
-				...sx,
-			}}
-		>
-			<Box
-				position="absolute"
-				top="-10%"
-				left="5%"
-			>
-				<Background />
-			</Box>
-			{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 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}
-		/>
-	);
-};
-
-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}
-		/>
-	);
-};

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

@@ -1,104 +0,0 @@
-import Box from "@mui/material/Box";
-import { BaseBox } from "@/Components/v2/design-elements";
-import Typography from "@mui/material/Typography";
-
-import type { MonitorStatus } from "@/Types/Monitor";
-import type { SxProps } from "@mui/material/styles";
-import { getStatusPalette, getValuePalette } from "@/Utils/MonitorUtils";
-import { useTheme } from "@mui/material/styles";
-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;
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const palette = getStatusPalette(status);
-
-	const determineStatus = (
-		isActive: boolean | undefined,
-		status: MonitorStatus
-	): string => {
-		if (isActive === false) {
-			return t("pages.common.monitors.status.paused");
-		}
-
-		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");
-	};
-
-	return (
-		<BaseBox
-			sx={{
-				display: "inline-flex",
-				flexDirection: "row",
-				alignItems: "center",
-				justifyContent: "center",
-				padding: theme.spacing(3, 5),
-				color: theme.palette[palette].main,
-				borderColor:
-					theme.palette.mode === "dark"
-						? "rgba(255, 255, 255, 0.08)"
-						: "rgba(0, 0, 0, 0.08)",
-				...sx,
-			}}
-		>
-			<Box
-				width={7}
-				height={7}
-				bgcolor={theme.palette[palette].light}
-				borderRadius="50%"
-				marginRight="5px"
-			/>
-			<Typography textTransform={"capitalize"}>
-				{determineStatus(isActive, status)}
-			</Typography>
-		</BaseBox>
-	);
-};
-
-export const ValueLabel = ({ value, text }: { value: ValueType; text: string }) => {
-	const theme = useTheme();
-	const palette = getValuePalette(value);
-	const transformedText = text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-
-	return (
-		<BaseBox
-			sx={{
-				display: "inline-flex",
-				flexDirection: "row",
-				alignItems: "center",
-				justifyContent: "center",
-				padding: theme.spacing(3, 5),
-				color: theme.palette[palette].main,
-				borderColor:
-					theme.palette.mode === "dark"
-						? "rgba(255, 255, 255, 0.08)"
-						: "rgba(0, 0, 0, 0.08)",
-			}}
-		>
-			<Box
-				width={7}
-				height={7}
-				bgcolor={theme.palette[palette].light}
-				borderRadius="50%"
-				marginRight="5px"
-			/>
-			<Typography>{transformedText}</Typography>
-		</BaseBox>
-	);
-};

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

@@ -1,595 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Grid2 from "@mui/material/Grid";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Paper from "@mui/material/Paper";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import Collapse from "@mui/material/Collapse";
-import Tooltip from "@mui/material/Tooltip";
-
-import IconButton from "@mui/material/IconButton";
-import {
-	ChevronsLeft,
-	ChevronsRight,
-	ChevronLeft,
-	ChevronRight,
-	Coffee,
-	Ellipsis,
-	PartyPopper,
-} from "lucide-react";
-
-import TablePagination from "@mui/material/TablePagination";
-import type { TablePaginationOwnProps } from "@mui/material/TablePagination";
-
-import { useTranslation } from "react-i18next";
-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> = {
-	id: number | string;
-	content: React.ReactNode;
-	onClick?: (event: React.MouseEvent<HTMLTableCellElement | null>, row: T) => void;
-	render: (row: T) => React.ReactNode;
-};
-
-type DataTableProps<T extends { id?: string | number; _id?: string | number }> = {
-	headers: Header<T>[];
-	data: T[];
-	onRowClick?: (row: T) => void;
-	cardsOnSmallScreens?: boolean;
-	expandableRows?: boolean;
-	renderExpandedContent?: (row: T) => React.ReactNode;
-	emptyViewText?: string;
-	emptyViewPositive?: boolean;
-	getRowSx?: (row: T) => SxProps<Theme>;
-};
-
-export function DataTable<
-	T extends {
-		id?: string | number;
-		_id?: string | number;
-		onRowClick?: (row: T) => void;
-	},
->({
-	headers,
-	data,
-	onRowClick,
-	cardsOnSmallScreens = true,
-	expandableRows = false,
-	renderExpandedContent,
-	emptyViewText,
-	emptyViewPositive,
-	getRowSx,
-}: DataTableProps<T>) {
-	const theme = useTheme();
-	const [expanded, setExpanded] = useState<(string | number) | null>(null);
-	const handleExpand = (row: T) => {
-		const key = row.id || row._id || null;
-		setExpanded(expanded === key ? null : key);
-	};
-
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-
-	if (data.length === 0 || headers.length === 0) {
-		return (
-			<EmptyView
-				text={emptyViewText}
-				positive={emptyViewPositive}
-			/>
-		);
-	}
-
-	const keys = [];
-	// Return stack of cards for small screens
-	if (isSmall && cardsOnSmallScreens) {
-		return (
-			<Stack spacing={theme.spacing(4)}>
-				{data.map((row) => {
-					const key = row.id || row._id || Math.random();
-					keys.push(key);
-					return (
-						<Stack
-							onClick={() => (onRowClick ? onRowClick(row) : null)}
-							spacing={theme.spacing(4)}
-							sx={{
-								borderStyle: "solid",
-								borderWidth: 1,
-								borderColor: theme.palette.divider,
-								borderRadius: theme.shape.borderRadius,
-								padding: theme.spacing(4),
-								cursor: onRowClick ? "pointer" : "default",
-							}}
-							key={key}
-						>
-							{headers.map((header) => {
-								return (
-									<Grid2
-										container
-										key={header.id}
-									>
-										<Grid2
-											size={5}
-											display={"flex"}
-											alignItems={"center"}
-										>
-											<Typography
-												component="div"
-												color={theme.palette.text.primary}
-											>
-												{header.content}
-											</Typography>
-										</Grid2>
-										<Grid2
-											size={7}
-											display="flex"
-											alignItems={"center"}
-										>
-											{header.render(row)}{" "}
-										</Grid2>
-									</Grid2>
-								);
-							})}
-							{expandableRows && renderExpandedContent && renderExpandedContent(row) && (
-								<Grid2 size={12}>{renderExpandedContent(row)}</Grid2>
-							)}
-						</Stack>
-					);
-				})}
-			</Stack>
-		);
-	}
-
-	return (
-		<TableContainer
-			component={Paper}
-			elevation={0}
-			sx={{ boxShadow: "none", overflowX: "hidden" }}
-		>
-			<Table
-				sx={{
-					"&.MuiTable-root  :is(.MuiTableHead-root, .MuiTableBody-root) :is(th, td)": {
-						paddingLeft: theme.spacing(8),
-					},
-					"& .MuiTableCell-root": {
-						borderBottom: `1px solid ${theme.palette.divider}`,
-					},
-					"& .MuiTableHead-root .MuiTableRow-root": {
-						height: "28px",
-					},
-					"& :is(th)": {
-						backgroundColor: theme.palette.background.paper,
-						color: theme.palette.text.secondary,
-						fontWeight: 500,
-						textTransform: "uppercase",
-						padding: `${theme.spacing(2)} ${theme.spacing(8)}`,
-						fontSize: theme.typography.fontSize,
-					},
-					"& :is(td)": {
-						backgroundColor: theme.palette.background.paper,
-						color: theme.palette.text.secondary,
-						padding: `${theme.spacing(7)} ${theme.spacing(8)}`,
-						fontSize: theme.typography.fontSize,
-						overflowX: "hidden",
-					},
-					"& .MuiTableBody-root .MuiTableRow-root:last-child .MuiTableCell-root": {
-						borderBottom: "none",
-					},
-				}}
-			>
-				<TableHead>
-					<TableRow>
-						{headers.map((header, idx) => {
-							return (
-								<TableCell
-									align={idx === 0 ? "left" : "center"}
-									key={header.id}
-								>
-									{header.content}
-								</TableCell>
-							);
-						})}
-					</TableRow>
-				</TableHead>
-				<TableBody>
-					{data.map((row) => {
-						const key = row.id || row._id || Math.random();
-						const isExpanded = expanded === key;
-
-						return (
-							<Fragment key={key}>
-								<TableRow
-									sx={{
-										cursor: onRowClick ? "pointer" : "default",
-										...(getRowSx?.(row) as object),
-									}}
-									onClick={() => {
-										if (expandableRows) handleExpand(row);
-										else if (onRowClick) onRowClick(row);
-									}}
-								>
-									{headers.map((header, index) => {
-										return (
-											<TableCell
-												align={index === 0 ? "left" : "center"}
-												key={header.id}
-												onClick={
-													header.onClick ? (e) => header.onClick!(e, row) : undefined
-												}
-											>
-												{header.render(row)}
-											</TableCell>
-										);
-									})}
-								</TableRow>
-								{expandableRows &&
-									renderExpandedContent &&
-									renderExpandedContent(row) && (
-										<TableRow>
-											<TableCell
-												colSpan={headers.length}
-												style={{
-													borderBottom: isExpanded ? undefined : "none",
-													paddingTop: 0,
-													paddingBottom: 0,
-												}}
-											>
-												<Collapse
-													in={isExpanded}
-													timeout="auto"
-													unmountOnExit
-												>
-													<Box sx={{ pt: 4, pb: 4 }}>{renderExpandedContent(row)}</Box>
-												</Collapse>
-											</TableCell>
-										</TableRow>
-									)}
-							</Fragment>
-						);
-					})}
-				</TableBody>
-			</Table>
-		</TableContainer>
-	);
-}
-
-interface TablePaginationActionsProps {
-	count: number;
-	page: number;
-	rowsPerPage: number;
-	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-}
-
-function TablePaginationActions(props: TablePaginationActionsProps) {
-	const theme = useTheme();
-	const { count, page, rowsPerPage, onPageChange } = props;
-
-	const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, 0);
-	};
-
-	const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, page - 1);
-	};
-
-	const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, page + 1);
-	};
-
-	const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-	};
-
-	return (
-		<Box
-			sx={{ flexShrink: 0, ml: { xs: 0, md: 2.5 } }}
-			className="table-pagination-actions"
-		>
-			<IconButton
-				onClick={handleFirstPageButtonClick}
-				disabled={page === 0}
-				aria-label="first page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronsRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronsLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<IconButton
-				onClick={handleBackButtonClick}
-				disabled={page === 0}
-				aria-label="previous page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<IconButton
-				onClick={handleNextButtonClick}
-				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-				aria-label="next page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<IconButton
-				onClick={handleLastPageButtonClick}
-				disabled={page >= Math.ceil(count / rowsPerPage) - 1}
-				aria-label="last page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronsLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronsRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-		</Box>
-	);
-}
-
-interface HasMoreTablePaginationActionsProps {
-	hasMore?: boolean;
-	page: number;
-	onPageChange: (event: React.MouseEvent<HTMLButtonElement>, newPage: number) => void;
-}
-function HasMoreTablePaginationActions(props: HasMoreTablePaginationActionsProps) {
-	const theme = useTheme();
-	const { hasMore, page, onPageChange } = props;
-
-	const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, 0);
-	};
-
-	const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, page - 1);
-	};
-
-	const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		onPageChange(event, page + 1);
-	};
-
-	return (
-		<Box
-			sx={{ flexShrink: 0, ml: { xs: 0, md: 2.5 } }}
-			className="table-pagination-actions"
-		>
-			<IconButton
-				onClick={handleFirstPageButtonClick}
-				disabled={page === 0}
-				aria-label="first page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronsRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronsLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<IconButton
-				onClick={handleBackButtonClick}
-				disabled={page === 0}
-				aria-label="previous page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<IconButton
-				onClick={handleNextButtonClick}
-				disabled={hasMore === false}
-				aria-label="next page"
-			>
-				{theme.direction === "rtl" ? (
-					<ChevronLeft
-						size={20}
-						strokeWidth={1.5}
-					/>
-				) : (
-					<ChevronRight
-						size={20}
-						strokeWidth={1.5}
-					/>
-				)}
-			</IconButton>
-			<Tooltip title={hasMore === true ? "More pages available" : "No more pages"}>
-				<IconButton
-					disabled={hasMore === false}
-					aria-label="next page"
-				>
-					<Ellipsis
-						size={20}
-						strokeWidth={1.5}
-					/>
-				</IconButton>
-			</Tooltip>
-		</Box>
-	);
-}
-
-interface PaginationProps extends TablePaginationOwnProps {
-	component?: React.ElementType;
-	hasMore?: boolean;
-	itemsOnPage?: number;
-}
-
-export const Pagination = ({ ...props }: PaginationProps) => {
-	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,
-		count,
-	}: {
-		from: number;
-		to: number;
-		count: number;
-	}) => {
-		if (hasMore) {
-			return to === 0 ? "" : `${from}–${to}`;
-		}
-		return `${from}–${to} of ${count}`;
-	};
-
-	return (
-		<TablePagination
-			ActionsComponent={(props) =>
-				typeof hasMore === "boolean" ? (
-					<HasMoreTablePaginationActions
-						{...props}
-						hasMore={hasMore}
-					/>
-				) : (
-					<TablePaginationActions {...props} />
-				)
-			}
-			rowsPerPageOptions={[5, 10, 25]}
-			labelDisplayedRows={labelDisplayedRows}
-			{...rest}
-			sx={{
-				"& .MuiTablePagination-toolbar": isSmall
-					? {
-							display: "grid",
-							gridTemplateColumns: "1fr 1fr",
-							gridAutoRows: "auto",
-							rowGap: theme.spacing(1),
-							alignItems: "center",
-							justifyItems: "center",
-							paddingLeft: 0,
-							paddingRight: 0,
-						}
-					: { display: "flex", alignItems: "center" },
-				"& .MuiTablePagination-selectLabel": {
-					gridColumn: "1",
-					gridRow: "1",
-					justifySelf: "center",
-				},
-				"& .MuiTablePagination-select": {
-					gridColumn: "2",
-					gridRow: "1",
-					justifySelf: "center",
-				},
-				"& .MuiTablePagination-displayedRows": isSmall
-					? { gridColumn: "1 / span 2", gridRow: "2", justifySelf: "center" }
-					: {},
-				"& .table-pagination-actions": isSmall
-					? { gridColumn: "1 / span 2", gridRow: "3", justifySelf: "center" }
-					: {},
-				"& .MuiSelect-select": {
-					border: 1,
-					borderColor: theme.palette.divider,
-					borderRadius: theme.shape.borderRadius,
-				},
-			}}
-		/>
-	);
-};
-
-const EmptyView = ({ text, positive }: { text?: string; positive?: boolean }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const Icon = positive ? PartyPopper : Coffee;
-	return (
-		<Stack
-			alignItems={"center"}
-			justifyContent={"center"}
-			sx={{
-				py: theme.spacing(12),
-				px: theme.spacing(4),
-				borderWidth: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.divider,
-				borderRadius: theme.shape.borderRadius,
-				textAlign: "center",
-			}}
-		>
-			<Box
-				sx={{
-					width: 64,
-					height: 64,
-					borderRadius: "50%",
-					backgroundColor: theme.palette.action.hover,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					mb: theme.spacing(2),
-				}}
-			>
-				<Icon
-					size={28}
-					strokeWidth={1}
-					color={theme.palette.text.secondary}
-				/>
-			</Box>
-			<Typography
-				variant="subtitle1"
-				color={theme.palette.text.primary}
-				sx={{ fontWeight: 500 }}
-			>
-				{text ?? t("common.table.empty")}
-			</Typography>
-		</Stack>
-	);
-};

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

@@ -1,64 +0,0 @@
-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/v2/design-elements/TextLink.tsx

@@ -1,42 +0,0 @@
-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?: string;
-}
-
-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}
-			>
-				{linkText}
-			</Link>
-		</Stack>
-	);
-};

client/src/Components/v2/design-elements/Tooltip.tsx

@@ -1,79 +0,0 @@
-import MuiTooltip from "@mui/material/Tooltip";
-import { useTheme } from "@mui/material/styles";
-import { Info } from "lucide-react";
-
-import type { TooltipProps } from "@mui/material/Tooltip";
-
-type StyledTooltipProps = TooltipProps;
-
-export const Tooltip = ({ placement = "top", ...props }: StyledTooltipProps) => {
-	const theme = useTheme();
-
-	return (
-		<MuiTooltip
-			title={props.title}
-			placement={placement}
-			slotProps={{
-				tooltip: {
-					sx: {
-						background:
-							theme.palette.mode === "dark"
-								? "linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)"
-								: "linear-gradient(135deg, #2c3e50 0%, #1a252f 100%)",
-						backgroundColor: "transparent",
-						color: "#ffffff",
-						fontSize: "13px",
-						padding: `${theme.spacing(4)} ${theme.spacing(5)}`,
-						borderRadius: `${theme.shape.borderRadius}px`,
-						boxShadow: "0 8px 24px rgba(0, 0, 0, 0.4)",
-					},
-				},
-			}}
-		>
-			{props.children}
-		</MuiTooltip>
-	);
-};
-
-export interface TooltipWithInfoProps extends Omit<StyledTooltipProps, "children"> {
-	iconSize?: number;
-	iconColor?: string;
-}
-
-export const TooltipWithInfo = ({
-	iconSize = 14,
-	iconColor,
-	...props
-}: TooltipWithInfoProps) => {
-	const theme = useTheme();
-
-	const defaultColor = theme.palette.text.secondary;
-
-	return (
-		<Tooltip {...props}>
-			<span
-				style={{
-					display: "inline-flex",
-					alignItems: "center",
-					cursor: "help",
-				}}
-			>
-				<Info
-					size={iconSize}
-					strokeWidth={1.5}
-					style={{
-						opacity: 0.7,
-						color: iconColor || defaultColor,
-						transition: "opacity 0.2s ease",
-					}}
-					onMouseEnter={(e) => {
-						e.currentTarget.style.opacity = "1";
-					}}
-					onMouseLeave={(e) => {
-						e.currentTarget.style.opacity = "0.7";
-					}}
-				/>
-			</span>
-		</Tooltip>
-	);
-};

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

@@ -1,21 +0,0 @@
-export * from "./Breadcrumb";
-export * from "./BasePage";
-export * from "./Fallback";
-export * from "./SkeletonCard";
-export * from "./BulletPointCheck";
-export * from "./StatusBox";
-export * from "./BaseBox";
-export * from "./Table";
-export { DataTable as Table } from "./Table";
-export * from "./StatusLabel";
-export * from "./PulseDot";
-export * from "./Dot";
-export * from "./MonitorStatus";
-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";

client/src/Components/v2/inputs/AutoComplete.tsx

@@ -1,88 +0,0 @@
-import Autocomplete from "@mui/material/Autocomplete";
-import type { AutocompleteProps } from "@mui/material/Autocomplete";
-import { TextField, Checkbox } from "@/Components/v2/inputs";
-import ListItem from "@mui/material/ListItem";
-import Stack from "@mui/material/Stack";
-import { useTheme } from "@mui/material/styles";
-import { FieldLabel } from "./FieldLabel";
-import { ChevronDown } from "lucide-react";
-
-type AutoCompleteInputProps = Omit<
-	AutocompleteProps<any, boolean, boolean, boolean>,
-	"renderInput"
-> & {
-	renderInput?: AutocompleteProps<any, boolean, boolean, boolean>["renderInput"];
-	fieldLabel?: string;
-	required?: boolean;
-};
-
-export const AutoCompleteInput = ({
-	fieldLabel,
-	required,
-	renderInput,
-	...props
-}: AutoCompleteInputProps) => {
-	const theme = useTheme();
-	const multiple = props.multiple;
-
-	const defaultRenderInput = (params: any) => (
-		<TextField
-			{...params}
-			placeholder="Type to search"
-		/>
-	);
-
-	const autocomplete = (
-		<Autocomplete
-			{...props}
-			disableCloseOnSelect={!!multiple}
-			popupIcon={
-				<ChevronDown
-					size={18}
-					strokeWidth={1.5}
-					style={{ marginRight: theme.spacing(3) }}
-				/>
-			}
-			renderInput={renderInput || defaultRenderInput}
-			getOptionKey={(option) => option.id}
-			renderTags={() => null}
-			renderOption={(props, option, { selected }) => {
-				const { key, ...optionProps } = props;
-				return (
-					<ListItem
-						key={key}
-						{...optionProps}
-					>
-						<Stack
-							direction={"row"}
-							alignItems={"center"}
-							gap={theme.spacing(2)}
-						>
-							{multiple && <Checkbox checked={selected} />}
-							{option.name}
-						</Stack>
-					</ListItem>
-				);
-			}}
-			sx={{
-				"&.MuiAutocomplete-root .MuiAutocomplete-input": {
-					padding: `0 ${theme.spacing(5)}`,
-				},
-				"& .MuiInputBase-root .MuiAutocomplete-endAdornment": {
-					right: theme.spacing(3),
-				},
-			}}
-		/>
-	);
-
-	if (fieldLabel) {
-		return (
-			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
-				{autocomplete}
-			</Stack>
-		);
-	}
-
-	return autocomplete;
-};

client/src/Components/v2/inputs/Button.tsx

@@ -1,37 +0,0 @@
-import Button from "@mui/material/Button";
-import type { ButtonProps } from "@mui/material/Button";
-import { useTheme } from "@mui/material/styles";
-
-export const ButtonInput = ({ sx, ...props }: ButtonProps) => {
-	const theme = useTheme();
-	const outlinedSx =
-		props.variant === "outlined"
-			? {
-					color: theme.palette.text.primary,
-					borderColor: theme.palette.divider,
-					"&:hover": {
-						borderColor: theme.palette.text.secondary,
-					},
-				}
-			: {};
-	return (
-		<Button
-			{...props}
-			sx={{
-				textTransform: "none",
-				height: 34,
-				fontWeight: 400,
-				borderRadius: 2,
-				whiteSpace: "nowrap",
-				textOverflow: "ellipsis",
-				overflow: "hidden",
-				boxShadow: "none",
-				"&:hover": {
-					boxShadow: "none",
-				},
-				...outlinedSx,
-				...sx,
-			}}
-		/>
-	);
-};

client/src/Components/v2/inputs/Checkbox.tsx

@@ -1,56 +0,0 @@
-import { forwardRef } from "react";
-import Checkbox from "@mui/material/Checkbox";
-import type { CheckboxProps } from "@mui/material/Checkbox";
-import { Square, SquareCheck } from "lucide-react";
-import { useTheme } from "@mui/material/styles";
-
-type CheckboxInputProps = CheckboxProps & {
-	label?: string;
-};
-export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
-	function CheckboxInput(
-		{ sx, ...props }: CheckboxInputProps,
-		ref: React.Ref<HTMLInputElement>
-	) {
-		const theme = useTheme();
-		return (
-			<Checkbox
-				{...props}
-				aria-label={props.label}
-				slotProps={{
-					input: {
-						ref: ref,
-					},
-				}}
-				icon={
-					<Square
-						size={16}
-						strokeWidth={1.5}
-					/>
-				}
-				checkedIcon={
-					<SquareCheck
-						size={16}
-						strokeWidth={1.5}
-					/>
-				}
-				sx={{
-					color: theme.palette.text.secondary,
-					"&.Mui-checked": {
-						color: theme.palette.primary.main,
-					},
-					"&:hover": { backgroundColor: "transparent" },
-					"& svg": {
-						stroke: "currentColor",
-					},
-					"& svg path, & svg line, & svg polyline, & svg rect": {
-						stroke: "currentColor",
-						fill: "none",
-					},
-
-					...sx,
-				}}
-			/>
-		);
-	}
-);

client/src/Components/v2/inputs/ColorPicker.tsx

@@ -1,48 +0,0 @@
-import { MuiColorInput } from "mui-color-input";
-import type { MuiColorInputProps } from "mui-color-input";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
-import { useTheme } from "@mui/material";
-import Stack from "@mui/material/Stack";
-import { FieldLabel } from "@/Components/v2/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/v2/inputs/DatePicker.tsx

@@ -1,100 +0,0 @@
-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/v2/inputs/Dialog.tsx

@@ -1,75 +0,0 @@
-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/v2/inputs";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
-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,
-}: {
-	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;
-}) => {
-	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>
-				{onConfirm && (
-					<Button
-						loading={loading}
-						variant="contained"
-						color={confirmColor}
-						onClick={onConfirm}
-					>
-						{confirmText ?? t("common.buttons.confirm")}
-					</Button>
-				)}
-			</DialogActions>
-		</Dialog>
-	);
-};

client/src/Components/v2/inputs/FieldLabel.tsx

@@ -1,40 +0,0 @@
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-
-interface FieldLabelProps {
-	children: React.ReactNode;
-	required?: boolean;
-	htmlFor?: string;
-}
-
-export const FieldLabel = ({ children, required = false, htmlFor }: FieldLabelProps) => {
-	const theme = useTheme();
-	if (children === " ") {
-		children = "\u00A0";
-	}
-	return (
-		<Typography
-			component="label"
-			htmlFor={htmlFor}
-			sx={{
-				fontSize: "14px",
-				fontWeight: 500,
-				color: theme.palette.text.secondary,
-				marginBottom: theme.spacing(2),
-				display: "block",
-			}}
-		>
-			{children}
-			{required && (
-				<span
-					style={{
-						color: theme.palette.error.main,
-						marginLeft: theme.spacing(2),
-					}}
-				>
-					*
-				</span>
-			)}
-		</Typography>
-	);
-};

client/src/Components/v2/inputs/ImageUpload.tsx

@@ -1,164 +0,0 @@
-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("common.errors.invalidFileFormat"));
-				return;
-			}
-			if (!isValidSize) {
-				setLocalError(t("common.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("common.imageUpload.clickToUpload")}
-						</Typography>{" "}
-						{t("common.imageUpload.orDragAndDrop")}
-					</Typography>
-					<Typography
-						variant="caption"
-						color="text.disabled"
-					>
-						{accept.join(", ").toUpperCase()} • {t("common.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/v2/inputs/LanguageSelector.tsx

@@ -1,100 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import MenuItem from "@mui/material/MenuItem";
-import { Select } from "@/Components/v2/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/v2/inputs/Radio.tsx

@@ -1,88 +0,0 @@
-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/v2/inputs/Select.tsx

@@ -1,110 +0,0 @@
-import Select from "@mui/material/Select";
-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";
-import Typography from "@mui/material/Typography";
-
-interface SelectInputProps<T> extends Omit<SelectProps<T>, "label"> {
-	fieldLabel?: string;
-	required?: boolean;
-	placeholder?: string;
-	placeholderColor?: string;
-}
-
-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: unknown) => {
-		const isMultiple = Boolean((props as { multiple?: boolean }).multiple);
-		const isEmpty = isMultiple
-			? !Array.isArray(selected) || selected.length === 0
-			: selected === undefined || selected === null || selected === "";
-
-		if (isEmpty && placeholder) {
-			return <Typography sx={{ color: emptyPlaceholderColor }}>{placeholder}</Typography>;
-		}
-
-		if (isMultiple) {
-			const items: string[] = Array.isArray(selected) ? selected : [];
-			const capitalized = items.map(
-				(item) => item.charAt(0).toUpperCase() + item.slice(1)
-			);
-			return <Typography>{capitalized.join(" | ")}</Typography>;
-		}
-
-		const nodes = React.Children.toArray(props.children as React.ReactNode);
-		for (const node of nodes) {
-			if (!React.isValidElement(node)) continue;
-			const el = node as React.ReactElement<{
-				value?: unknown;
-				children?: React.ReactNode;
-			}>;
-			if (el.props?.value === selected) {
-				return (el.props.children ?? selected) as React.ReactNode;
-			}
-		}
-		return selected as React.ReactNode;
-	};
-
-	const select = (
-		<Select<T>
-			{...props}
-			ref={ref}
-			displayEmpty
-			renderValue={renderValue}
-			inputProps={{
-				...(props.inputProps || {}),
-				"aria-placeholder": placeholder,
-			}}
-			IconComponent={() => (
-				<ChevronDown
-					size={18}
-					strokeWidth={1.5}
-					style={{ marginRight: theme.spacing(3) }}
-				/>
-			)}
-			sx={{
-				height: "34px",
-				"& .MuiSelect-select": {
-					display: "flex",
-					alignItems: "center",
-					height: "100%",
-					boxSizing: "border-box",
-				},
-				"& .MuiSelect-icon": {
-					right: theme.spacing(3),
-				},
-				"& .MuiOutlinedInput-notchedOutline": {
-					borderRadius: theme.shape.borderRadius,
-					borderColor: theme.palette.divider,
-				},
-				"&:hover .MuiOutlinedInput-notchedOutline": {
-					borderColor: theme.palette.divider,
-				},
-				...props.sx,
-			}}
-		/>
-	);
-
-	if (fieldLabel) {
-		return (
-			<Stack spacing={theme.spacing(2)}>
-				<FieldLabel required={required}>{fieldLabel}</FieldLabel>
-				{select}
-			</Stack>
-		);
-	}
-
-	return select;
-};
-
-export const SelectInput = forwardRef(SelectInputInner) as <T>(
-	props: SelectInputProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }
-) => React.ReactElement;

client/src/Components/v2/inputs/Slider.tsx

@@ -1,89 +0,0 @@
-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: `0 0 0 8px ${theme.palette.primary.main}20`,
-								},
-							},
-							"& .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/v2/inputs/Switch.tsx

@@ -1,47 +0,0 @@
-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/v2/inputs/SwitchTheme.tsx

@@ -1,48 +0,0 @@
-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/v2/inputs/TextInput.tsx

@@ -1,56 +0,0 @@
-import { forwardRef } from "react";
-import TextField from "@mui/material/TextField";
-import type { TextFieldProps } from "@mui/material";
-import { typographyLevels } from "@/Utils/Theme/v2Palette";
-import { useTheme } from "@mui/material/styles";
-import Stack from "@mui/material/Stack";
-import { FieldLabel } from "./FieldLabel";
-
-interface TextInputProps extends Omit<TextFieldProps, "label"> {
-	fieldLabel?: string;
-	required?: boolean;
-}
-
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function TextInput(
-	{ fieldLabel, required, ...props },
-	ref
-) {
-	const theme = useTheme();
-
-	const input = (
-		<TextField
-			{...props}
-			inputRef={ref}
-			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;
-});
-TextInput.displayName = "TextInput";

client/src/Components/v2/inputs/TimePicker.tsx

@@ -1,61 +0,0 @@
-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/v2/inputs/ToggleButton.tsx

@@ -1,52 +0,0 @@
-import ToggleButton from "@mui/material/ToggleButton";
-import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import type { ToggleButtonProps } from "@mui/material/ToggleButton";
-import type { ToggleButtonGroupProps } from "@mui/material/ToggleButtonGroup";
-import { useTheme } from "@mui/material/styles";
-
-export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => {
-	return (
-		<ToggleButton
-			{...props}
-			sx={{
-				px: 8,
-				textTransform: "none",
-				height: 34,
-				fontWeight: 400,
-				whiteSpace: "nowrap",
-				textOverflow: "ellipsis",
-				overflow: "hidden",
-				boxShadow: "none",
-				"&:hover": {
-					boxShadow: "none",
-				},
-				...sx,
-			}}
-		/>
-	);
-};
-
-export const ToggleButtonGroupInput = ({ sx, ...props }: ToggleButtonGroupProps) => {
-	const theme = useTheme();
-	return (
-		<ToggleButtonGroup
-			{...props}
-			sx={{
-				"& .MuiToggleButtonGroup-grouped": {
-					borderColor: theme.palette.divider,
-
-					borderRadius: 0,
-					"&:first-of-type": {
-						borderTopLeftRadius: 2,
-						borderBottomLeftRadius: 2,
-					},
-					"&:last-of-type": {
-						borderTopRightRadius: 2,
-						borderBottomRightRadius: 2,
-					},
-				},
-				...sx,
-			}}
-		/>
-	);
-};

client/src/Components/v2/inputs/index.tsx

@@ -1,20 +0,0 @@
-export { ButtonInput as Button } from "./Button";
-export * from "./FieldLabel";
-export { SelectInput as Select } from "./Select";
-export { CheckboxInput as Checkbox } from "./Checkbox";
-export { AutoCompleteInput as Autocomplete } from "./AutoComplete";
-export { TextInput as TextField } from "./TextInput";
-export {
-	ToggleButtonInput as ToggleButton,
-	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/v2/monitors/ControlsFilter.tsx

@@ -1,96 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { Select, Button } from "@/Components/v2/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", "game"];
-const statuses = ["up", "down"];
-const states = ["active", "paused"];
-
-export const ControlsFilter = ({
-	showTypes = true,
-	selectedTypes,
-	setSelectedTypes,
-	selectedStatus,
-	setSelectedStatus,
-	selectedState,
-	setSelectedState,
-	onClearFilters,
-}: {
-	showTypes?: boolean;
-	selectedTypes?: MonitorType[];
-	setSelectedTypes?: React.Dispatch<React.SetStateAction<MonitorType[]>>;
-	selectedStatus: string;
-	setSelectedStatus: React.Dispatch<React.SetStateAction<string>>;
-	selectedState: string;
-	setSelectedState: React.Dispatch<React.SetStateAction<string>>;
-	onClearFilters: () => void;
-}) => {
-	const theme = useTheme();
-	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
-	const isFilterActive =
-		(selectedTypes?.length ?? 0) > 0 || selectedStatus !== "" || selectedState !== "";
-	return (
-		<Stack
-			direction={isSmall ? "column" : "row"}
-			gap={theme.spacing(2)}
-		>
-			{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}
-				onChange={(e) => setSelectedStatus(e.target.value)}
-			>
-				{statuses.map((status) => (
-					<MenuItem
-						key={status}
-						value={status}
-					>
-						<Typography textTransform={"capitalize"}>{status}</Typography>
-					</MenuItem>
-				))}
-			</Select>
-			<Select
-				placeholder="State"
-				value={selectedState}
-				onChange={(e) => setSelectedState(e.target.value)}
-			>
-				{states.map((state) => (
-					<MenuItem
-						key={state}
-						value={state}
-					>
-						<Typography textTransform={"capitalize"}>{state}</Typography>
-					</MenuItem>
-				))}
-			</Select>
-			{isFilterActive && (
-				<Button
-					variant="contained"
-					onClick={onClearFilters}
-				>
-					Clear Filters
-				</Button>
-			)}
-		</Stack>
-	);
-};

client/src/Components/v2/monitors/HeaderMonitorControls.tsx

@@ -1,176 +0,0 @@
-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, Trash } from "lucide-react";
-
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-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 | null;
-	isAdmin: boolean;
-	refetch: Function;
-}
-
-export const HeaderMonitorControls = ({
-	path,
-	monitor,
-	isAdmin,
-	refetch,
-}: HeaderMonitorControlsProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const navigate = useNavigate();
-	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)}
-			>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isPosting}
-					startIcon={<Icon icon={Mail} />}
-					onClick={async () => {
-						await post(`/notifications/test/all`, { monitorId: monitor.id });
-					}}
-					sx={{
-						whiteSpace: "nowrap",
-					}}
-				>
-					{t("common.buttons.testNotifications")}
-				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					startIcon={<Icon icon={Bug} />}
-					onClick={() => {
-						navigate(`/incidents/${monitor?.id}`);
-					}}
-				>
-					{t("common.buttons.incidents")}
-				</Button>
-				{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="secondary"
-						startIcon={<Icon icon={Settings} />}
-						onClick={() => navigate(`/${path}/configure/${monitor.id}`)}
-					>
-						{t("common.buttons.configure")}
-					</Button>
-				)}
-			</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>
-	);
-};