revert: Remove PageSpeed stats fix (already fixed on develop)

The PageSpeed stats fix has been implemented differently on develop branch
by Alex Holliday in commit 6447c315c. Reverting this change to avoid
conflicts and keep the incidents fixes.

.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 ..

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)
-- [GitHub Discussions](https://github.com/bluewave-labs/bluewave-uptime/discussions) (we check here from time to time)
+- [Discord channel](https://discord.gg/NAb6H3UTjK)
+- [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,15 @@
 		"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/material": "7.3.7",
-		"@mui/x-charts": "7.29.1",
-		"@mui/x-date-pickers": "7.29.4",
+		"@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
+		"@mui/material": "6.4.11",
+		"@mui/x-charts": "^7.5.1",
+		"@mui/x-date-pickers": "7.29.0",
 		"@reduxjs/toolkit": "2.7.0",
 		"axios": "^1.7.4",
 		"dayjs": "1.11.13",
@@ -33,12 +30,11 @@
 		"i18next": "25.4.2",
 		"joi": "17.13.3",
 		"lucide-react": "^0.562.0",
-		"mui-color-input": "^7.0.0",
-		"pretty-bytes": "^7.1.0",
-		"pretty-ms": "^9.3.0",
+		"mui-color-input": "^6.0.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
-				newestOnTop={true}
-				theme={mode}
-				style={{
-					"--toastify-color-progress-light": "#7C8BA1",
-					"--toastify-color-progress-dark": "#7C8BA1",
-				}}
-			/>
+			<ToastContainer />
 		</ThemeProvider>
 	);
 }

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

@@ -32,6 +32,7 @@ const ActionsMenu = ({
 		event.preventDefault();
 		event.stopPropagation();
 		let monitor = { id: actions.id };
+		console.log(monitor);
 		await deleteMonitor({ monitor });
 		updateRowCallback();
 	};

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

@@ -56,14 +56,7 @@ const Check = ({ text, noHighlightText, variant = "info", outlined = false }) =>
 					fontWeight: 450,
 				}}
 			>
-				{noHighlightText && (
-					<Typography
-						component="span"
-						sx={{ color: "inherit" }}
-					>
-						{noHighlightText}
-					</Typography>
-				)}{" "}
+				{noHighlightText && <Typography component="span">{noHighlightText}</Typography>}{" "}
 				{text}
 			</Typography>
 		</Stack>

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

@@ -0,0 +1,100 @@
+import { Checkbox, FormControl, ListItemText, MenuItem, Select } from "@mui/material";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+import Icon from "../Icon";
+
+/**
+ * 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) => (
+					<Icon
+						{...props}
+						name="PlusCircle"
+						size={18}
+					/>
+				)}
+				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/Icon/index.jsx

@@ -12,7 +12,6 @@ import {
 	Calendar,
 	Check,
 	CheckCircle,
-	CheckCircle2,
 	CheckSquare,
 	ChevronDown,
 	ChevronLeft,
@@ -83,7 +82,6 @@ const iconComponents = {
 	Calendar,
 	Check,
 	CheckCircle,
-	CheckCircle2,
 	CheckSquare,
 	ChevronDown,
 	ChevronLeft,

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

@@ -14,7 +14,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;
 }

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 { useSidebar } from "@/Hooks/useSidebar.js";
+import { Stack } from "@mui/material";
 
 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,119 @@
+import * as React from "react";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import Icon from "../Icon";
+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}
+				>
+					<Icon
+						name="ChevronDown"
+						size={20}
+					/>
+				</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,158 @@
+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 Icon from "../Icon";
+
+// 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={
+								<Icon
+									name="Mail"
+									size={18}
+								/>
+							}
+							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 ? (
+								<Icon
+									name="Pause"
+									size={18}
+								/>
+							) : (
+								<Icon
+									name="Play"
+									size={18}
+								/>
+							)
+						}
+						onClick={() => {
+							pauseMonitor({
+								monitorId: monitor?.id,
+								triggerUpdate,
+							});
+						}}
+					>
+						{monitor?.isActive ? "Pause" : "Resume"}
+					</Button>
+				)}
+				{isAdmin && (
+					<Button
+						variant="contained"
+						color="secondary"
+						startIcon={
+							<Icon
+								name="Settings"
+								size={18}
+							/>
+						}
+						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,127 @@
+// Components
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
+import Icon from "../Icon";
+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>
+						<Icon
+							name="Trash2"
+							size={20}
+							onClick={() => {
+								handleDelete(notification._id);
+							}}
+							style={{ 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/Sidebar/index.jsx

@@ -12,9 +12,9 @@ import Icon from "../Icon";
 
 // 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",
@@ -65,7 +65,8 @@ 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 +75,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,
-				backgroundColor: theme.palette.background.main,
-				borderRight: `1px solid ${theme.palette.primary.lowContrast}`,
-				zIndex: 1000,
+				transition: "width 650ms cubic-bezier(0.36, -0.01, 0, 0.77)",
 			}}
 		>
 			<CollapseButton collapsed={collapsed} />

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

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

@@ -1,74 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { StatBox } from "@/Components/v2/design-elements";
-
-import prettyMilliseconds from "pretty-ms";
-import { useTheme } from "@mui/material/styles";
-import type { MonitorStats, Monitor } from "@/Types/Monitor";
-import { getStatusPalette } from "@/Utils/MonitorUtils";
-import { useTranslation } from "react-i18next";
-
-interface MonitorStatBoxesProps {
-	monitor?: Monitor;
-	monitorStats: MonitorStats | null;
-	certificateExpiry?: string;
-}
-
-export const MonitorStatBoxes = ({
-	monitor,
-	monitorStats,
-	certificateExpiry,
-}: MonitorStatBoxesProps) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-	if (!monitorStats || !monitor) {
-		return null;
-	}
-
-	const timeOfLastFailure = monitorStats?.timeOfLastFailure || 0;
-	const timeSinceLastFailure =
-		timeOfLastFailure > 0
-			? Date.now() - timeOfLastFailure
-			: Date.now() - new Date(monitorStats?.createdAt || 0).getTime();
-
-	// Determine time since last check
-	const timeOfLastCheck = monitorStats?.lastCheckTimestamp || 0;
-	const timeSinceLastCheck = Date.now() - timeOfLastCheck || 0;
-
-	const options = {
-		secondsDecimalDigits: 0,
-		millisecondsDecimalDigits: 0,
-	};
-
-	const streakTime = prettyMilliseconds(timeSinceLastFailure, options);
-
-	const lastCheckTime = prettyMilliseconds(timeSinceLastCheck, options);
-	const palette = getStatusPalette(monitor?.status);
-
-	return (
-		<Stack
-			direction={{ xs: "column", md: "row" }}
-			gap={theme.spacing(8)}
-		>
-			<StatBox
-				palette={palette}
-				title={t("pages.common.monitors.statBoxes.activeFor")}
-				subtitle={streakTime}
-			/>
-			<StatBox
-				title={t("pages.common.monitors.statBoxes.lastCheck")}
-				subtitle={lastCheckTime}
-			/>
-			<StatBox
-				title={t("pages.common.monitors.statBoxes.lastResponseTime")}
-				subtitle={prettyMilliseconds(monitorStats?.lastResponseTime ?? 0)}
-			/>
-
-			{monitor?.type === "http" && (
-				<StatBox
-					title={t("pages.common.monitors.statBoxes.certificateExpiry")}
-					subtitle={certificateExpiry || "N/A"}
-				/>
-			)}
-		</Stack>
-	);
-};

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

@@ -1,163 +0,0 @@
-import { BaseChart, BaseBox } from "@/Components/v2/design-elements";
-import { Clock } from "lucide-react";
-import {
-	AreaChart,
-	Area,
-	XAxis,
-	Tooltip,
-	CartesianGrid,
-	ResponsiveContainer,
-	Text,
-} from "recharts";
-import Typography from "@mui/material/Typography";
-
-import { useSelector } from "react-redux";
-import {
-	formatDateWithTz,
-	tickDateFormatLookup,
-	tooltipDateFormatLookup,
-} from "@/Utils/TimeUtils";
-import { useTheme } from "@mui/material/styles";
-import type { GroupedCheck } from "@/Types/Check";
-import type { RootState } from "@/Types/state";
-
-type XTickProps = {
-	x: number;
-	y: number;
-	payload: { value: any };
-	range: string;
-};
-
-export const XTick = ({ x, y, payload, range }: XTickProps) => {
-	const format = tickDateFormatLookup(range);
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	return (
-		<Text
-			x={x}
-			y={y + 10}
-			textAnchor="middle"
-			fill={theme.palette.text.secondary}
-			fontSize={11}
-			fontWeight={400}
-		>
-			{formatDateWithTz(payload?.value, format, uiTimezone)}
-		</Text>
-	);
-};
-
-type ResponseTimeToolTipProps = {
-	active?: boolean | undefined;
-	payload?: any[];
-	label?: string | number;
-	range: string;
-	theme: any;
-	uiTimezone: string;
-};
-
-const ResponseTimeToolTip = ({
-	active,
-	payload,
-	label,
-	range,
-	theme,
-	uiTimezone,
-}: ResponseTimeToolTipProps) => {
-	if (!label) return null;
-	if (!payload) return null;
-	if (!active) return null;
-
-	const format = tooltipDateFormatLookup(range);
-	const responseTime = Math.floor(payload?.[0]?.payload?.avgResponseTime || 0);
-	return (
-		<BaseBox sx={{ py: theme.spacing(2), px: theme.spacing(4) }}>
-			<Typography>{formatDateWithTz(String(label), format, uiTimezone)}</Typography>
-			<Typography>Response time: {responseTime} ms</Typography>
-		</BaseBox>
-	);
-};
-
-export const HistogramDetails = ({
-	checks,
-	range,
-}: {
-	checks: GroupedCheck[];
-	range: string;
-}) => {
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	return (
-		<BaseChart
-			icon={
-				<Clock
-					size={20}
-					strokeWidth={1.5}
-				/>
-			}
-			title="Response times"
-		>
-			<ResponsiveContainer
-				width="100%"
-				height={300}
-			>
-				<AreaChart data={checks?.slice()}>
-					<CartesianGrid
-						stroke={theme.palette.divider}
-						strokeWidth={1}
-						strokeOpacity={1}
-						fill="transparent"
-						vertical={false}
-					/>
-					<defs>
-						<linearGradient
-							id="colorUv"
-							x1="0"
-							y1="0"
-							x2="0"
-							y2="1"
-						>
-							<stop
-								offset="0%"
-								stopColor={theme.palette.primary.main}
-								stopOpacity={0.8}
-							/>
-							<stop
-								offset="100%"
-								stopColor={theme.palette.primary.light}
-								stopOpacity={0}
-							/>
-						</linearGradient>
-					</defs>
-					<XAxis
-						axisLine={false}
-						tickLine={false}
-						dataKey="bucketDate"
-						tick={(props) => (
-							<XTick
-								{...props}
-								range={range}
-							/>
-						)}
-					/>
-
-					<Tooltip
-						content={(props) => (
-							<ResponseTimeToolTip
-								{...props}
-								range={range}
-								theme={theme}
-								uiTimezone={uiTimezone}
-							/>
-						)}
-					/>
-					<Area
-						type="monotone"
-						dataKey="avgResponseTime"
-						stroke={theme.palette.primary.main}
-						fill="url(#colorUv)"
-					/>
-				</AreaChart>
-			</ResponsiveContainer>
-		</BaseChart>
-	);
-};

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

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

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

@@ -1,106 +0,0 @@
-import Stack from "@mui/material/Stack";
-import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip } from "recharts";
-import { HistogramPageSpeedTooltip } from "@/Components/v2/monitors/charts/HistogramPageSpeedTooltip";
-import { useTheme } from "@mui/material/styles";
-import type { CheckSnapshot } from "@/Types/Check";
-import type { MonitorStatus } from "@/Types/Monitor";
-
-import { getStatusColor } from "@/Utils/MonitorUtils";
-
-const processData = (checks: CheckSnapshot[]) => {
-	if (checks.length === 0) return [];
-	const formattedData: { score: number; date: string }[] = [];
-
-	const calculateScore = (entry: CheckSnapshot) => {
-		const accessibility = entry?.accessibility || 0;
-		const bestPractices = entry?.bestPractices || 0;
-		const performance = entry?.performance || 0;
-		const seo = entry?.seo || 0;
-		return Math.floor((accessibility + bestPractices + performance + seo) / 4);
-	};
-
-	checks.forEach((entry) => {
-		const score = calculateScore(entry);
-		const date = entry.createdAt;
-		formattedData.push({ score, date });
-	});
-
-	return formattedData;
-};
-
-export const HistogramPageSpeed = ({
-	checks,
-	status,
-}: {
-	checks: CheckSnapshot[];
-	status: MonitorStatus;
-}) => {
-	const theme = useTheme();
-	const scores = processData(checks ?? []);
-	const color = getStatusColor(status, theme);
-	return (
-		<Stack
-			direction="row"
-			flexWrap="nowrap"
-			gap={theme.spacing(1.5)}
-			height="100px"
-			maxWidth="400px"
-			width="100%"
-			onClick={(event) => event.stopPropagation()}
-			overflow={"hidden"}
-			sx={{
-				cursor: "default",
-				position: "relative",
-			}}
-		>
-			<ResponsiveContainer
-				width="100%"
-				height={"100%"}
-			>
-				<AreaChart
-					data={scores}
-					margin={{ top: 10, bottom: -5 }}
-					style={{ cursor: "pointer" }}
-				>
-					<CartesianGrid
-						stroke={theme.palette.divider}
-						strokeWidth={1}
-						strokeOpacity={1}
-						fill="transparent"
-						vertical={false}
-					/>
-					<Tooltip
-						cursor={{ stroke: theme.palette.divider }}
-						content={<HistogramPageSpeedTooltip />}
-					/>
-					<defs>
-						<linearGradient
-							id={`pagespeed-chart-${status}`}
-							x1="0"
-							y1="0"
-							x2="0"
-							y2="1"
-						>
-							<stop
-								offset="0%"
-								stopColor={color}
-								stopOpacity={0.8}
-							/>
-							<stop
-								offset="100%"
-								stopColor={color}
-								stopOpacity={0}
-							/>
-						</linearGradient>
-					</defs>
-					<Area
-						type="monotone"
-						dataKey="score"
-						stroke={color}
-						fill={`url(#pagespeed-chart-${status})`}
-					/>
-				</AreaChart>
-			</ResponsiveContainer>
-		</Stack>
-	);
-};

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

@@ -1,144 +0,0 @@
-import { BaseChart } from "@/Components/v2/design-elements";
-import { TrendingUp } from "lucide-react";
-import { XTick } from "@/Components/v2/monitors/";
-import {
-	XAxis,
-	AreaChart,
-	Area,
-	Tooltip,
-	CartesianGrid,
-	ResponsiveContainer,
-} from "recharts";
-import { HistogramPageSpeedScoresTooltip } from "@/Components/v2/monitors";
-
-import { useTheme } from "@mui/material/styles";
-import type { CheckSnapshot } from "@/Types/Check";
-import type { Palette } from "@mui/material/styles";
-type PaletteColorKey = Extract<
-	keyof Palette,
-	"primary" | "error" | "success" | "warning"
->;
-
-export interface ConfigItem {
-	id: string;
-	text: string;
-	palette: PaletteColorKey;
-}
-
-const config: Record<string, ConfigItem> = {
-	seo: {
-		id: "seo",
-		text: "SEO",
-		palette: "primary",
-	},
-	performance: {
-		id: "performance",
-		text: "performance",
-		palette: "success",
-	},
-	bestPractices: {
-		id: "bestPractices",
-		text: "best practices",
-		palette: "warning",
-	},
-	accessibility: {
-		id: "accessibility",
-		text: "accessibility",
-		palette: "error",
-	},
-};
-
-export const HistogramPageSpeedDetails = ({
-	checks,
-	range,
-}: {
-	checks: CheckSnapshot[];
-	range: string;
-}) => {
-	const theme = useTheme();
-	return (
-		<BaseChart
-			icon={
-				<TrendingUp
-					size={20}
-					strokeWidth={1.5}
-				/>
-			}
-			title="Score history"
-		>
-			<ResponsiveContainer
-				width="100%"
-				minWidth={25}
-				height={215}
-			>
-				<AreaChart data={checks}>
-					<XAxis
-						dataKey={"createdAt"}
-						tick={(props) => (
-							<XTick
-								{...props}
-								range={range}
-							/>
-						)}
-					/>
-					<CartesianGrid
-						stroke={theme.palette.divider}
-						strokeWidth={1}
-						strokeOpacity={1}
-						fill="transparent"
-						vertical={false}
-					/>
-					<Tooltip
-						cursor={{ stroke: theme.palette.divider }}
-						content={<HistogramPageSpeedScoresTooltip config={config} />}
-					/>
-					<defs>
-						{Object.values(config).map(({ id, palette }) => {
-							const startColor = theme.palette[palette].main;
-							const endColor = theme.palette[palette].light;
-
-							return (
-								<linearGradient
-									id={id}
-									x1="0"
-									y1="0"
-									x2="0"
-									y2="1"
-									key={id}
-								>
-									<stop
-										offset="0%"
-										stopColor={startColor}
-										stopOpacity={0.8}
-									/>
-									<stop
-										offset="100%"
-										stopColor={endColor}
-										stopOpacity={0}
-									/>
-								</linearGradient>
-							);
-						})}
-					</defs>
-					{Object.keys(config).map((key) => {
-						const { palette } = config[key];
-						const strokeColor = theme.palette[palette].main;
-						const bgColor = theme.palette.primary.main;
-
-						return (
-							<Area
-								connectNulls
-								key={key}
-								dataKey={key}
-								stackId={1}
-								stroke={strokeColor}
-								fill={`url(#${config[key].id})`}
-								activeDot={{ stroke: bgColor, fill: strokeColor, r: 4.5 }}
-							/>
-						);
-					})}
-				</AreaChart>
-			</ResponsiveContainer>
-		</BaseChart>
-	);
-};

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

@@ -1,79 +0,0 @@
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { useTheme } from "@mui/material/styles";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { ConfigItem } from "@/Components/v2/monitors";
-import type { TooltipProps } from "recharts";
-import { useSelector } from "react-redux";
-import type { RootState } from "@/Types/state";
-
-interface HistogramPageSpeedScoresTooltipProps extends Partial<
-	TooltipProps<number, string>
-> {
-	config: Record<string, ConfigItem>;
-}
-export const HistogramPageSpeedScoresTooltip = ({
-	active,
-	payload,
-	label,
-	config,
-}: HistogramPageSpeedScoresTooltipProps) => {
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-
-	if (active && payload && payload.length) {
-		return (
-			<Box
-				sx={{
-					backgroundColor: theme.palette.background.paper,
-					border: 1,
-					borderColor: theme.palette.divider,
-					borderRadius: theme.shape.borderRadius,
-					py: theme.spacing(2),
-					px: theme.spacing(4),
-				}}
-			>
-				<Typography
-					sx={{
-						color: theme.palette.text.secondary,
-						fontSize: 12,
-						fontWeight: 500,
-					}}
-				>
-					{formatDateWithTz(label, "ddd, MMMM D, YYYY, h:mm A", uiTimezone)}
-				</Typography>
-				{Object.keys(config)
-					.reverse()
-					.map((key) => {
-						const { palette } = config[key];
-						const dotColor = theme.palette[palette].main;
-
-						return (
-							<Stack
-								key={`${key}-tooltip`}
-								direction="row"
-								alignItems="center"
-								gap={theme.spacing(3)}
-								mt={theme.spacing(1)}
-							>
-								<Box
-									width={theme.spacing(4)}
-									height={theme.spacing(4)}
-									sx={{ borderRadius: "50%", backgroundColor: dotColor }}
-								/>
-								<Typography
-									textTransform="capitalize"
-									sx={{ opacity: 0.8 }}
-								>
-									{config[key].text}
-								</Typography>
-								<Typography>{Math.floor(payload[0].payload[key])}</Typography>
-							</Stack>
-						);
-					})}
-			</Box>
-		);
-	}
-	return null;
-};

client/src/Components/v2/monitors/charts/HistogramPageSpeedTooltip.tsx

@@ -1,39 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { formatDateWithTz } from "@/Utils/TimeUtils";
-import type { TooltipProps } from "recharts";
-import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import type { RootState } from "@/Types/state";
-
-export const HistogramPageSpeedTooltip = ({
-	active,
-	payload,
-}: TooltipProps<number, string>) => {
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const theme = useTheme();
-
-	if (!active || !payload || payload.length === 0) {
-		return null;
-	}
-
-	const data = payload[0]?.payload;
-
-	return (
-		<Stack
-			alignItems="flex-start"
-			sx={{
-				backgroundColor: theme.palette.secondary.main,
-				border: 1,
-				borderColor: theme.palette.divider,
-				borderRadius: theme.shape.borderRadius,
-				p: theme.spacing(4),
-			}}
-		>
-			<Typography>
-				{formatDateWithTz(data?.date, "ddd, MMMM D, YYYY, HH:mm A", uiTimezone)}
-			</Typography>
-			<Typography>Score: {data?.score}</Typography>
-		</Stack>
-	);
-};

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

@@ -1,166 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { BaseChart } from "@/Components/v2/design-elements";
-import { useTheme } from "@mui/material/styles";
-import { useSelector } from "react-redux";
-import { formatDateWithTz } from "@/Utils/timeUtilsLegacy";
-import { useTranslation } from "react-i18next";
-import { ResponsiveContainer, BarChart, XAxis, Bar, Cell, Tooltip } from "recharts";
-import { getResponseTimeColor } from "@/Utils/MonitorUtils";
-import type { GroupedCheck } from "@/Types/Check";
-import type { RootState } from "@/Types/state";
-
-interface XLabelProps {
-	p1: GroupedCheck;
-	p2: GroupedCheck;
-	range: string;
-}
-
-const XLabel = ({ p1, p2, range }: XLabelProps) => {
-	const theme = useTheme();
-	const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-	const dateFormat = range === "day" ? "MMM D, h:mm A" : "MMM D";
-	return (
-		<>
-			<text
-				x={0}
-				y="100%"
-				dy={-3}
-				textAnchor="start"
-				fontSize={11}
-				fill={theme.palette.text.secondary}
-			>
-				{formatDateWithTz(p1.bucketDate, dateFormat, uiTimezone)}
-			</text>
-			<text
-				x="100%"
-				y="100%"
-				dy={-3}
-				textAnchor="end"
-				fontSize={11}
-				fill={theme.palette.text.secondary}
-			>
-				{formatDateWithTz(p2.bucketDate, dateFormat, uiTimezone)}
-			</text>
-		</>
-	);
-};
-
-interface HistogramStatusProps {
-	title: string;
-	icon: React.ReactNode;
-	checks?: GroupedCheck[];
-	range: string;
-}
-
-export const HistogramStatus = ({
-	title,
-	icon,
-	checks = [],
-	range,
-}: HistogramStatusProps) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const CustomTooltip = ({
-		active,
-		payload,
-	}: {
-		active?: boolean;
-		payload?: Array<{ payload: GroupedCheck }>;
-	}) => {
-		const uiTimezone = useSelector((state: RootState) => state.ui.timezone);
-		if (!active || !payload?.length) return null;
-		const d = payload[0]?.payload;
-		const avg = d?.avgResponseTime ?? 0;
-		const titleText = t("common.charts.labels.averageResponseTime");
-		const fmt = range === "30d" ? "MMM D, YYYY" : "ddd, MMM D, YYYY, h:mm A";
-		let dateLabel = "";
-		if (d?.bucketDate) {
-			const base = new Date(d.bucketDate);
-			const midBucket =
-				range === "30d" ? new Date(base.getTime() + 12 * 60 * 60 * 1000) : base;
-			dateLabel = formatDateWithTz(midBucket.toISOString(), fmt, uiTimezone);
-		}
-		return (
-			<Stack
-				sx={{
-					p: 1,
-					bgcolor: "background.paper",
-					border: 1,
-					borderColor: "divider",
-					borderRadius: 1,
-				}}
-			>
-				{dateLabel ? (
-					<Typography
-						sx={{ color: "text.secondary" }}
-						variant="caption"
-					>
-						{dateLabel}
-					</Typography>
-				) : null}
-				<Typography variant="caption">{titleText}</Typography>
-				<Typography variant="body2">{Math.floor(avg)} ms</Typography>
-			</Stack>
-		);
-	};
-
-	const totalChecks = checks.reduce((acc, check) => acc + (check.totalChecks || 0), 0);
-
-	return (
-		<BaseChart
-			icon={icon}
-			title={title}
-		>
-			<Stack gap={theme.spacing(8)}>
-				<Stack
-					position="relative"
-					direction="row"
-					justifyContent="space-between"
-				>
-					<Stack>
-						<Typography>Total checks: {totalChecks}</Typography>
-					</Stack>
-				</Stack>
-				<ResponsiveContainer
-					width="100%"
-					height={155}
-				>
-					<BarChart data={checks}>
-						<XAxis
-							stroke={theme.palette.divider}
-							height={15}
-							tick={false}
-							label={
-								<XLabel
-									p1={checks[0]}
-									p2={checks[checks.length - 1]}
-									range={range}
-								/>
-							}
-						/>
-						<Tooltip
-							cursor={false}
-							content={<CustomTooltip />}
-						/>
-						<Bar
-							dataKey="avgResponseTime"
-							maxBarSize={7}
-							background={{ fill: "transparent" }}
-						>
-							{checks?.map((groupedCheck, index) => {
-								const fillColor = getResponseTimeColor(groupedCheck.avgResponseTime);
-								return (
-									<Cell
-										key={groupedCheck.bucketDate || `check-${index}`}
-										fill={theme.palette[fillColor].main}
-									/>
-								);
-							})}
-						</Bar>
-					</BarChart>
-				</ResponsiveContainer>
-			</Stack>
-		</BaseChart>
-	);
-};

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

@@ -1,161 +0,0 @@
-import { BaseChart } from "@/Components/v2/design-elements";
-import { FileText } from "lucide-react";
-import type { CheckAudits, CheckSnapshot } from "@/Types/Check";
-import { Pie, PieChart, ResponsiveContainer, Label } from "recharts";
-import Typography from "@mui/material/Typography";
-import Box from "@mui/material/Box";
-import { getPageSpeedPalette } from "@/Utils/MonitorUtils";
-import { useTheme } from "@mui/material/styles";
-import { alpha } from "@mui/material/styles";
-import { useState } from "react";
-import Tooltip from "@mui/material/Tooltip";
-import { useTranslation } from "react-i18next";
-
-const CenterLabel = ({ viewBox, value }: any) => {
-	const { cx, cy } = viewBox;
-	return (
-		<foreignObject
-			x={cx - 25}
-			y={cy - 10}
-			width={50}
-			height={50}
-		>
-			<Typography
-				variant="h1"
-				align="center"
-			>
-				{value}
-			</Typography>
-		</foreignObject>
-	);
-};
-
-export const PiePageSpeed = ({ latestCheck }: { latestCheck?: CheckSnapshot }) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const [hoverTitle, setHoverTitle] = useState<string | null>(null);
-
-	if (!latestCheck) return null;
-	const LABELS: Record<string, string> = {
-		FCP: t("pages.pageSpeed.charts.common.fcp"),
-		SI: t("pages.pageSpeed.charts.common.si"),
-		LCP: t("pages.pageSpeed.charts.common.lcp"),
-		TBT: t("pages.pageSpeed.charts.common.tbt"),
-		CLS: t("pages.pageSpeed.charts.common.cls"),
-	};
-	const metrics: { key: keyof CheckAudits; color: string; weight: number }[] = [
-		{ key: "fcp", color: alpha("#1DE9B6", 0.6), weight: 0.1 },
-		{ key: "si", color: alpha("#7C4DFF", 0.6), weight: 0.1 },
-		{ key: "lcp", color: alpha("#FFB200", 0.6), weight: 0.25 },
-		{ key: "tbt", color: alpha("#00AFFE", 0.6), weight: 0.3 },
-		{ key: "cls", color: alpha("#FF4181", 0.6), weight: 0.25 },
-	];
-
-	const scores = metrics.flatMap(({ key, color, weight }) => {
-		const audit = latestCheck?.audits?.[key];
-		const val = Math.floor((audit?.score ?? 0) * 100);
-		const inverse = 100 - val;
-		return [
-			{
-				name: `${key.toUpperCase()} Inverse`,
-				value: inverse * weight,
-				fill: "transparent",
-				stroke: color,
-				weight,
-			},
-			{
-				name: key.toUpperCase(),
-				value: val * weight,
-				fill: color,
-				stroke: color,
-				weight,
-			},
-		];
-	});
-
-	const totalScore =
-		(latestCheck.audits?.fcp?.score || 0) * 0.1 +
-		(latestCheck.audits?.si?.score || 0) * 0.1 +
-		(latestCheck.audits?.lcp?.score || 0) * 0.25 +
-		(latestCheck.audits?.tbt?.score || 0) * 0.3 +
-		(latestCheck.audits?.cls?.score || 0) * 0.25;
-	const pageSpeedPalette = getPageSpeedPalette(Math.floor(totalScore * 100));
-
-	const score = [
-		{
-			value: 100,
-			fill: alpha(theme.palette[pageSpeedPalette].light || "#ffffff", 0.6),
-			stroke: "none",
-		},
-	];
-
-	return (
-		<BaseChart
-			icon={
-				<FileText
-					size={20}
-					strokeWidth={1.5}
-				/>
-			}
-			title={t("pages.pageSpeed.charts.pie.title")}
-		>
-			<Tooltip
-				open={Boolean(hoverTitle)}
-				title={hoverTitle || ""}
-				arrow
-				followCursor
-				placement="top"
-			>
-				<Box
-					sx={{
-						"& .recharts-wrapper:focus, & .recharts-surface:focus": {
-							outline: "none",
-						},
-						"& .recharts-wrapper *:focus": { outline: "none" },
-						"& svg:focus, & g:focus, & path:focus": { outline: "none" },
-						position: "relative",
-					}}
-				>
-					<ResponsiveContainer
-						width="100%"
-						height={250}
-					>
-						<PieChart>
-							<Pie
-								data={score}
-								dataKey="value"
-								cx="50%"
-								cy="50%"
-								outerRadius="65%"
-							>
-								<Label
-									position={"center"}
-									content={<CenterLabel value={Math.floor(totalScore * 100)} />}
-								/>
-							</Pie>
-							<Pie
-								data={scores}
-								innerRadius="70%"
-								outerRadius="80%"
-								label={({ name, value }) => `${name}: ${Math.round(value)}`}
-								dataKey="value"
-								stroke="none"
-								onMouseEnter={(_, index: number) => {
-									const d = scores[index];
-									if (!d) return;
-									const isInverse = String(d.name).includes("Inverse");
-									const pair = isInverse && scores[index + 1] ? scores[index + 1] : d;
-									const base = String(pair.name).replace(" Inverse", "");
-									const full = LABELS[base] ?? base;
-									const displayVal = Math.round(Number(pair.value) || 0);
-									setHoverTitle(`${full}: ${displayVal}`);
-								}}
-								onMouseLeave={() => setHoverTitle(null)}
-							/>
-						</PieChart>
-					</ResponsiveContainer>
-				</Box>
-			</Tooltip>
-		</BaseChart>
-	);
-};

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

@@ -1,105 +0,0 @@
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import { BarChart3 } from "lucide-react";
-import { BaseChart } from "@/Components/v2/design-elements";
-import Typography from "@mui/material/Typography";
-
-import type { CheckSnapshot } from "@/Types/Check";
-import { useTranslation } from "react-i18next";
-import { getPageSpeedPalette } from "@/Utils/MonitorUtils";
-import { useTheme } from "@mui/material/styles";
-
-const MetricBox = ({
-	label,
-	value,
-	weight,
-}: {
-	label: string;
-	value: number;
-	weight: number;
-}) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const palette = getPageSpeedPalette(value);
-	return (
-		<Stack
-			direction={"row"}
-			sx={{
-				border: 1,
-				borderStyle: "solid",
-				borderColor: theme.palette.divider,
-				borderRadius: theme.shape.borderRadius,
-			}}
-		>
-			<Stack
-				flex={1}
-				p={theme.spacing(4)}
-			>
-				<Typography textTransform={"uppercase"}>{label}</Typography>
-				<Stack
-					direction="row"
-					justifyContent={"space-between"}
-				>
-					<Typography>{`${value}%`}</Typography>
-					<Typography>{`${t("pages.pageSpeed.charts.legend.weight")}: ${weight}%`}</Typography>
-				</Stack>
-			</Stack>
-			<Box
-				width={4}
-				bgcolor={theme.palette[palette].light}
-				sx={{
-					borderTopRightRadius: theme.shape.borderRadius,
-					borderBottomRightRadius: theme.shape.borderRadius,
-				}}
-			/>
-		</Stack>
-	);
-};
-
-export const PiePageSpeedLegend = ({ latestCheck }: { latestCheck?: CheckSnapshot }) => {
-	const theme = useTheme();
-	const { t } = useTranslation();
-
-	if (!latestCheck) {
-		return null;
-	}
-	return (
-		<BaseChart
-			icon={
-				<BarChart3
-					size={20}
-					strokeWidth={1.5}
-				/>
-			}
-			title={t("pages.pageSpeed.charts.legend.title")}
-		>
-			<Stack gap={theme.spacing(4)}>
-				<MetricBox
-					label={t("pages.pageSpeed.charts.common.si")}
-					value={Math.floor((latestCheck.audits?.si?.score || 0) * 100)}
-					weight={10}
-				/>
-				<MetricBox
-					label={t("pages.pageSpeed.charts.common.fcp")}
-					value={Math.floor((latestCheck.audits?.fcp?.score || 0) * 100)}
-					weight={10}
-				/>
-				<MetricBox
-					label={t("pages.pageSpeed.charts.common.cls")}
-					value={Math.floor((latestCheck.audits?.cls?.score || 0) * 100)}
-					weight={25}
-				/>
-				<MetricBox
-					label={t("pages.pageSpeed.charts.common.tbt")}
-					value={Math.floor((latestCheck.audits?.tbt?.score || 0) * 100)}
-					weight={30}
-				/>
-				<MetricBox
-					label={t("pages.pageSpeed.charts.common.lcp")}
-					value={Math.floor((latestCheck.audits?.lcp?.score || 0) * 100)}
-					weight={25}
-				/>
-			</Stack>
-		</BaseChart>
-	);
-};

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

@@ -1,91 +0,0 @@
-import { BaseChart } from "@/Components/v2/design-elements";
-import Stack from "@mui/material/Stack";
-import Typography from "@mui/material/Typography";
-import { Gauge } from "lucide-react";
-import { Cell, RadialBarChart, RadialBar, ResponsiveContainer } from "recharts";
-
-import { useTranslation } from "react-i18next";
-import { getResponseTimeColor } from "@/Utils/MonitorUtils";
-import { useTheme } from "@mui/material/styles";
-
-export const RadialAvgResponse = ({ avg, max }: { avg: number; max: number }) => {
-	const { t } = useTranslation();
-	const theme = useTheme();
-	const chartData = [
-		{ name: "max", value: max - avg, color: "transparent" },
-		{ name: "avg", value: avg, color: "red" },
-	];
-
-	const palette = getResponseTimeColor(avg);
-	const msg: Record<string, string> = {
-		success: "Excellent",
-		warning: "Average",
-		danger: "Poor",
-	};
-
-	return (
-		<BaseChart
-			icon={
-				<Gauge
-					size={20}
-					strokeWidth={1.5}
-				/>
-			}
-			title={t("common.charts.labels.averageResponseTime")}
-		>
-			<Stack
-				height="100%"
-				position={"relative"}
-				justifyContent={"flex-end"}
-			>
-				<ResponsiveContainer
-					width="100%"
-					height={155}
-				>
-					<RadialBarChart
-						cy="100%"
-						data={chartData}
-						startAngle={180}
-						endAngle={0}
-						innerRadius={"120%"}
-						outerRadius={"200%"}
-					>
-						<RadialBar
-							dataKey="value"
-							background={{ fill: theme.palette[palette].light }}
-						>
-							<Cell visibility={"hidden"} />
-							<Cell fill={theme.palette[palette].main} />
-						</RadialBar>
-					</RadialBarChart>
-				</ResponsiveContainer>
-				<Stack
-					direction={"row"}
-					justifyContent={"space-between"}
-				>
-					<Typography variant="body2">{t("common.charts.labels.low")}</Typography>
-					<Typography variant="body2">{t("common.charts.labels.high")}</Typography>
-				</Stack>
-				<Stack
-					position="absolute"
-					top={"50%"}
-					right={"50%"}
-					sx={{
-						transform: "translate(50%, 0%)",
-					}}
-				>
-					<Typography
-						variant="h6"
-						textAlign={"center"}
-					>
-						{msg[palette]}
-					</Typography>
-					<Typography
-						variant="h6"
-						textAlign={"center"}
-					>{`${avg?.toFixed()}ms`}</Typography>
-				</Stack>
-			</Stack>
-		</BaseChart>
-	);
-};

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

@@ -1,13 +0,0 @@
-export * from "./ControlsFilter";
-export * from "./MonitorStatBoxes";
-export * from "./HeaderMonitorControls";
-export * from "./charts/HistogramStatus";
-export * from "./charts/RadialAvgResponse";
-export * from "./charts/HistogramDetails";
-export * from "./charts/HistogramPageSpeed";
-export * from "./charts/HistogramPageSpeedTooltip";
-export * from "./charts/PiePageSpeed";
-export * from "./charts/PiePageSpeedLegend";
-export * from "./charts/HistogramPageSpeedDetails";
-export * from "./charts/HistogramPageSpeedDetailsTooltip";
-export * from "./charts/HistogramInfrastructure";

client/src/Features/Auth/authSlice.js

@@ -10,24 +10,21 @@ const initialState = {
 	msg: null,
 };
 
-export const register = createAsyncThunk(
-	"auth/register",
-	async ({ user, token }, thunkApi) => {
-		try {
-			const res = await networkService.registerUser(user, token);
-			return res.data;
-		} catch (error) {
-			if (error.response.data) {
-				return thunkApi.rejectWithValue(error.response.data);
-			}
-			const payload = {
-				status: false,
-				msg: error.message ? error.message : "Unknown error",
-			};
-			return thunkApi.rejectWithValue(payload);
+export const register = createAsyncThunk("auth/register", async (form, thunkApi) => {
+	try {
+		const res = await networkService.registerUser(form);
+		return res.data;
+	} catch (error) {
+		if (error.response.data) {
+			return thunkApi.rejectWithValue(error.response.data);
 		}
+		const payload = {
+			status: false,
+			msg: error.message ? error.message : "Unknown error",
+		};
+		return thunkApi.rejectWithValue(payload);
 	}
-);
+});
 
 export const login = createAsyncThunk("auth/login", async (form, thunkApi) => {
 	try {
@@ -196,13 +193,6 @@ const authSlice = createSlice({
 			state.success = true;
 			state.msg = "Logged out successfully";
 		},
-		setAuthState: (state, action) => {
-			state.isLoading = false;
-			state.success = action.payload.success;
-			state.msg = action.payload.msg;
-			state.authToken = action.payload.data.token;
-			state.user = action.payload.data.user;
-		},
 	},
 	extraReducers: (builder) => {
 		// Register thunk
@@ -256,4 +246,4 @@ const authSlice = createSlice({
 });
 
 export default authSlice.reducer;
-export const { clearAuthState, setAuthState } = authSlice.actions;
+export const { clearAuthState } = authSlice.actions;

client/src/Features/UI/uiSlice.js

@@ -19,9 +19,6 @@ const initialState = {
 	infrastructure: {
 		rowsPerPage: 5,
 	},
-	logs: {
-		rowsPerPage: 15,
-	},
 	sidebar: {
 		collapsed: false,
 	},
@@ -32,7 +29,6 @@ const initialState = {
 	distributedUptimeEnabled: false,
 	language: "en",
 	starPromptOpen: true,
-	chartType: "histogram",
 };
 
 const uiSlice = createSlice({
@@ -44,10 +40,9 @@ const uiSlice = createSlice({
 		},
 		setRowsPerPage: (state, action) => {
 			const { table, value } = action.payload;
-			if (!state[table]) {
-				state[table] = {};
+			if (state[table]) {
+				state[table].rowsPerPage = value;
 			}
-			state[table].rowsPerPage = value;
 		},
 		toggleSidebar: (state) => {
 			state.sidebar.collapsed = !state.sidebar.collapsed;
@@ -78,9 +73,6 @@ const uiSlice = createSlice({
 		setStarPromptOpen: (state, action) => {
 			state.starPromptOpen = action.payload;
 		},
-		setChartType: (state, action) => {
-			state.chartType = action.payload;
-		},
 	},
 });
 
@@ -96,5 +88,4 @@ export const {
 	setDistributedUptimeEnabled,
 	setLanguage,
 	setStarPromptOpen,
-	setChartType,
 } = uiSlice.actions;

client/src/Hooks/UseApi.ts

@@ -1,181 +0,0 @@
-import useSWR from "swr";
-import type { SWRConfiguration } from "swr";
-import type { AxiosRequestConfig } from "axios";
-import { get, patch, post, put, deleteOp } from "@/Utils/ApiClient";
-import { useState } from "react";
-import { useToast } from "@/Hooks/UseToast";
-
-interface ApiResponse<T> {
-	success: boolean;
-	msg: string;
-	data: T;
-}
-
-const fetcher = async <T>(url: string, config?: AxiosRequestConfig) => {
-	const res = await get<ApiResponse<T>>(url, config);
-	return res.data;
-};
-
-export const useGet = <T>(
-	url: string | null,
-	axiosConfig?: AxiosRequestConfig,
-	swrConfig?: SWRConfiguration
-) => {
-	const { data, error, isLoading, isValidating, mutate } = useSWR<ApiResponse<T>>(
-		url,
-		(url: string) => fetcher<T>(url, axiosConfig),
-		swrConfig
-	);
-
-	return {
-		data: data?.data ?? null,
-		isLoading,
-		isValidating,
-		error,
-		refetch: mutate,
-	};
-};
-
-export const usePost = <B = any, R = any>() => {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const { toastError, toastSuccess } = useToast();
-
-	const postFn = async (
-		endpoint: string,
-		body: B,
-		config?: AxiosRequestConfig
-	): Promise<ApiResponse<R> | null> => {
-		setLoading(true);
-		setError(null);
-
-		try {
-			const res = await post<ApiResponse<R>>(endpoint, body, {
-				...config,
-				headers: {
-					...config?.headers,
-				},
-			});
-			toastSuccess(res.data?.msg || "Operation successful");
-
-			return res.data;
-		} catch (err: any) {
-			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
-			console.error(err);
-			toastError(errMsg);
-			setError(errMsg);
-			return null;
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return { post: postFn, loading, error };
-};
-
-export const usePatch = <B = any, R = any>() => {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const { toastError, toastSuccess } = useToast();
-
-	const patchFn = async (
-		endpoint: string,
-		body?: B,
-		config?: AxiosRequestConfig
-	): Promise<ApiResponse<R> | null> => {
-		setLoading(true);
-		setError(null);
-
-		try {
-			const res = await patch<ApiResponse<R>>(endpoint, body, {
-				...config,
-				headers: {
-					...config?.headers,
-				},
-			});
-			toastSuccess(res.data?.msg || "Operation successful");
-			return res.data;
-		} catch (err: any) {
-			console.error(err);
-			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
-			toastError(errMsg);
-			setError(errMsg);
-			return null;
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return { patch: patchFn, loading, error };
-};
-
-export const usePut = <B = any, R = any>() => {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const { toastError, toastSuccess } = useToast();
-
-	const putFn = async (
-		endpoint: string,
-		body?: B,
-		config?: AxiosRequestConfig
-	): Promise<ApiResponse<R> | null> => {
-		setLoading(true);
-		setError(null);
-
-		try {
-			const res = await put<ApiResponse<R>>(endpoint, body, {
-				...config,
-				headers: {
-					...config?.headers,
-				},
-			});
-			toastSuccess(res.data?.msg || "Operation successful");
-			return res.data;
-		} catch (err: any) {
-			console.error(err);
-			const errMsg = err?.response?.data?.msg || err.message || "An error occurred";
-			toastError(errMsg);
-			setError(errMsg);
-			return null;
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return { put: putFn, loading, error };
-};
-
-export const useDelete = <R = any>() => {
-	const [loading, setLoading] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-	const { toastError, toastSuccess } = useToast();
-
-	const deleteFn = async (
-		endpoint: string,
-		config?: AxiosRequestConfig
-	): Promise<ApiResponse<R> | null> => {
-		setLoading(true);
-		setError(null);
-
-		try {
-			const res = await deleteOp<ApiResponse<R>>(endpoint, {
-				...config,
-				headers: {
-					...config?.headers,
-				},
-			});
-			toastSuccess(res.data?.msg || "Operation successful");
-			return res.data;
-		} catch (err: any) {
-			console.error(err);
-			const errMsg = err?.response?.data?.message || err.message || "An error occurred";
-			toastError(errMsg);
-			setError(errMsg);
-			return null;
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return { deleteFn, loading, error };
-};

client/src/Hooks/UseToast.ts

@@ -1,24 +0,0 @@
-import { toast, type ToastOptions } from "react-toastify";
-
-export const useToast = () => {
-	const showToast = (message: string, options?: ToastOptions) => {
-		toast.dismiss();
-		const baseStyle: React.CSSProperties = {
-			whiteSpace: "pre-line",
-			wordBreak: "break-word",
-		};
-		toast(message, {
-			...options,
-			style: { ...baseStyle, ...(options?.style || {}) },
-		});
-	};
-
-	const toastSuccess = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "success" });
-	const toastError = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "error" });
-	const toastInfo = (msg: string, opts?: ToastOptions) =>
-		showToast(msg, { ...opts, type: "info" });
-
-	return { showToast, toastSuccess, toastError, toastInfo };
-};

client/src/Hooks/checkHooks.js

@@ -137,7 +137,7 @@ const useFetchChecksByMonitor = ({
 	return [checks, checksCount, isLoading, networkError];
 };
 
-const useFetchChecksSummaryByTeamId = ({ dateRange, updateTrigger } = {}) => {
+const useFetchChecksSummaryByTeamId = ({ updateTrigger } = {}) => {
 	const [summary, setSummary] = useState(undefined);
 	const [isLoading, setIsLoading] = useState(false);
 	const [networkError, setNetworkError] = useState(false);
@@ -147,7 +147,7 @@ const useFetchChecksSummaryByTeamId = ({ dateRange, updateTrigger } = {}) => {
 			try {
 				setIsLoading(true);
 
-				const res = await networkService.getChecksAndSummaryByTeamId({ dateRange });
+				const res = await networkService.getChecksAndSummaryByTeamId();
 				setSummary(res.data.data);
 			} catch (error) {
 				setNetworkError(true);
@@ -158,7 +158,7 @@ const useFetchChecksSummaryByTeamId = ({ dateRange, updateTrigger } = {}) => {
 		};
 
 		fetchSummary();
-	}, [dateRange, updateTrigger]);
+	}, [updateTrigger]);
 
 	return [summary, isLoading, networkError];
 };
@@ -185,9 +185,36 @@ const useResolveIncident = () => {
 	return [resolveIncident, isLoading];
 };
 
+const useAcknowledgeChecks = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { t } = useTranslation();
+
+	const acknowledge = async (setUpdateTrigger, monitorId = null) => {
+		setIsLoading(true);
+		try {
+			if (monitorId) {
+				await networkService.updateMonitorChecksStatus({ monitorId, ack: true });
+			} else {
+				await networkService.updateAllChecksStatus({ ack: true });
+			}
+			setUpdateTrigger((prev) => !prev);
+		} catch (error) {
+			const toastMessage = monitorId
+				? t("checkHooks.failureResolveMonitor")
+				: t("checkHooks.failureResolveAll");
+			createToast({ body: toastMessage });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return { acknowledge, isLoading };
+};
+
 export {
 	useFetchChecksByMonitor,
 	useFetchChecksTeam,
 	useFetchChecksSummaryByTeamId,
 	useResolveIncident,
+	useAcknowledgeChecks,
 };

client/src/Hooks/monitorHooks.js

@@ -1,8 +1,107 @@
 import { useEffect, useState } from "react";
 import { networkService } from "../main.jsx";
 import { createToast } from "../Utils/toastUtils.jsx";
+import { useTheme } from "@emotion/react";
+import { useMonitorUtils } from "./useMonitorUtils.js";
+import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
+export const useFetchMonitorsWithSummary = ({ types, monitorUpdateTrigger }) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [monitors, setMonitors] = useState(undefined);
+	const [monitorsSummary, setMonitorsSummary] = useState(undefined);
+	const [networkError, setNetworkError] = useState(false);
+
+	useEffect(() => {
+		const fetchMonitors = async () => {
+			try {
+				setIsLoading(true);
+				const res = await networkService.getMonitorsWithSummaryByTeamId({
+					types,
+				});
+				const { monitors, summary } = res?.data?.data ?? {};
+				setMonitors(monitors);
+				setMonitorsSummary(summary);
+			} catch (error) {
+				console.error(error);
+				setNetworkError(true);
+				createToast({
+					body: error.message,
+				});
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitors();
+	}, [types, monitorUpdateTrigger]);
+	return [monitors, monitorsSummary, isLoading, networkError];
+};
+
+export const useFetchMonitorsWithChecks = ({
+	types,
+	limit,
+	page,
+	rowsPerPage,
+	filter,
+	field,
+	order,
+	monitorUpdateTrigger,
+}) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [count, setCount] = useState(undefined);
+	const [monitors, setMonitors] = useState(undefined);
+	const [summary, setSummary] = useState(undefined);
+	const [networkError, setNetworkError] = useState(false);
+
+	const theme = useTheme();
+	const { getMonitorWithPercentage } = useMonitorUtils();
+	useEffect(() => {
+		const fetchMonitors = async () => {
+			try {
+				setIsLoading(true);
+				const res = await networkService.getMonitorsWithChecksByTeamId({
+					limit,
+					types,
+					page,
+					rowsPerPage,
+					filter,
+					field,
+					order,
+				});
+
+				const { count, monitors, summary } = res?.data?.data ?? {};
+				const mappedMonitors = monitors.map((monitor) =>
+					getMonitorWithPercentage(monitor, theme)
+				);
+				setSummary(summary);
+				setMonitors(mappedMonitors);
+				setCount(count || 0);
+			} catch (error) {
+				console.error(error);
+				setNetworkError(true);
+				createToast({
+					body: error.message,
+				});
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitors();
+	}, [
+		field,
+		filter,
+		getMonitorWithPercentage,
+		limit,
+		order,
+		page,
+		rowsPerPage,
+		theme,
+		types,
+		monitorUpdateTrigger,
+	]);
+	return [summary, monitors, count, isLoading, networkError];
+};
+
 export const useFetchMonitorsByTeamId = ({ types, filter, updateTrigger }) => {
 	const [isLoading, setIsLoading] = useState(false);
 	const [monitors, setMonitors] = useState(undefined);
@@ -33,17 +132,224 @@ export const useFetchMonitorsByTeamId = ({ types, filter, updateTrigger }) => {
 	return [monitors, isLoading, networkError];
 };
 
-export const useDeleteMonitor = () => {
+export const useFetchStatsByMonitorId = ({
+	monitorId,
+	sortOrder,
+	limit,
+	dateRange,
+	numToDisplay,
+	normalize,
+	updateTrigger,
+}) => {
+	const [monitor, setMonitor] = useState(undefined);
+	const [audits, setAudits] = useState(undefined);
+	const [isLoading, setIsLoading] = useState(true);
+	const [networkError, setNetworkError] = useState(false);
+	useEffect(() => {
+		const fetchMonitor = async () => {
+			try {
+				setIsLoading(true);
+				const res = await networkService.getStatsByMonitorId({
+					monitorId: monitorId,
+					sortOrder,
+					limit,
+					dateRange,
+					numToDisplay,
+					normalize,
+				});
+				setMonitor(res?.data?.data ?? undefined);
+				setAudits(res?.data?.data?.checks?.[0]?.audits ?? undefined);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitor();
+	}, [monitorId, dateRange, numToDisplay, normalize, sortOrder, limit, updateTrigger]);
+	return [monitor, audits, isLoading, networkError];
+};
+
+export const useFetchMonitorGames = ({ setGames, updateTrigger }) => {
+	const [isLoading, setIsLoading] = useState(true);
+	useEffect(() => {
+		const fetchGames = async () => {
+			try {
+				setIsLoading(true);
+				const res = await networkService.getMonitorGames();
+				setGames(res.data.data);
+			} catch (error) {
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchGames();
+	}, [setGames, updateTrigger]);
+	return [isLoading];
+};
+
+export const useFetchMonitorById = ({ monitorId, setMonitor, updateTrigger }) => {
+	const [isLoading, setIsLoading] = useState(true);
+	useEffect(() => {
+		if (typeof monitorId === "undefined") {
+			setIsLoading(false);
+			return;
+		}
+		const fetchMonitor = async () => {
+			try {
+				setIsLoading(true);
+				const res = await networkService.getMonitorById({ monitorId: monitorId });
+				setMonitor(res.data.data);
+			} catch (error) {
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitor();
+	}, [monitorId, setMonitor, updateTrigger]);
+	return [isLoading];
+};
+
+export const useFetchHardwareMonitorById = ({ monitorId, dateRange, updateTrigger }) => {
+	const [isLoading, setIsLoading] = useState(true);
+	const [networkError, setNetworkError] = useState(false);
+	const [monitor, setMonitor] = useState(undefined);
+
+	useEffect(() => {
+		const fetchMonitor = async () => {
+			try {
+				if (!monitorId) {
+					return { monitor: undefined, isLoading: false, networkError: undefined };
+				}
+				const response = await networkService.getHardwareDetailsByMonitorId({
+					monitorId: monitorId,
+					dateRange: dateRange,
+				});
+				setMonitor(response.data.data);
+			} catch (error) {
+				setNetworkError(true);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitor();
+	}, [monitorId, dateRange, updateTrigger]);
+	return [monitor, isLoading, networkError];
+};
+export const useFetchPageSpeedMonitorById = ({ monitorId, dateRange, updateTrigger }) => {
+	const [isLoading, setIsLoading] = useState(true);
+	const [networkError, setNetworkError] = useState(false);
+	const [monitor, setMonitor] = useState(undefined);
+
+	useEffect(() => {
+		const fetchMonitor = async () => {
+			try {
+				if (!monitorId) {
+					return { monitor: undefined, isLoading: false, networkError: undefined };
+				}
+				const response = await networkService.getPageSpeedDetailsByMonitorId({
+					monitorId: monitorId,
+					dateRange: dateRange,
+				});
+				setMonitor(response.data.data);
+			} catch (error) {
+				setNetworkError(true);
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitor();
+	}, [monitorId, dateRange, updateTrigger]);
+	return [monitor, isLoading, networkError];
+};
+
+export const useFetchUptimeMonitorById = ({ monitorId, dateRange, trigger }) => {
+	const [networkError, setNetworkError] = useState(false);
+	const [isLoading, setIsLoading] = useState(true);
+	const [monitor, setMonitor] = useState(undefined);
+	const [monitorStats, setMonitorStats] = useState(undefined);
+	useEffect(() => {
+		const fetchMonitors = async () => {
+			try {
+				const res = await networkService.getUptimeDetailsById({
+					monitorId: monitorId,
+					dateRange: dateRange,
+					normalize: true,
+				});
+				const { monitorData, monitorStats } = res?.data?.data ?? {};
+				setMonitor(monitorData);
+				setMonitorStats(monitorStats);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+		fetchMonitors();
+	}, [dateRange, monitorId, trigger]);
+	return [monitor, monitorStats, isLoading, networkError];
+};
+
+export const useCreateMonitor = () => {
 	const [isLoading, setIsLoading] = useState(false);
-	const { t } = useTranslation();
-	const deleteMonitor = async (monitorId, successCallback = () => {}) => {
+	const navigate = useNavigate();
+	const createMonitor = async ({ monitor, redirect }) => {
 		try {
 			setIsLoading(true);
-			await networkService.deleteMonitorById({ monitorId });
-			successCallback();
-			createToast({ body: t("monitorDeleted") });
+			await networkService.createMonitor({ monitor });
+			createToast({ body: "Monitor created successfully!" });
+			if (redirect) {
+				navigate(redirect);
+			}
 		} catch (error) {
-			createToast({ body: t("failedDeleteMonitor") });
+			createToast({ body: "Failed to create monitor." });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return [createMonitor, isLoading];
+};
+
+export const useFetchGlobalSettings = () => {
+	const [isLoading, setIsLoading] = useState(true);
+	const [globalSettings, setGlobalSettings] = useState(undefined);
+	useEffect(() => {
+		const fetchGlobalSettings = async () => {
+			try {
+				const res = await networkService.getAppSettings();
+				setGlobalSettings(res?.data);
+			} catch (error) {
+				console.error("Failed to fetch global settings:", error);
+				createToast({ body: "Failed to load global settings" });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchGlobalSettings();
+	}, []);
+
+	return [globalSettings, isLoading];
+};
+
+export const useDeleteMonitor = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const navigate = useNavigate();
+	const deleteMonitor = async ({ monitor, redirect }) => {
+		try {
+			setIsLoading(true);
+			console.log(monitor);
+			await networkService.deleteMonitorById({ monitorId: monitor.id });
+			createToast({ body: "Monitor deleted successfully!" });
+			if (redirect) {
+				navigate(redirect);
+			}
+		} catch (error) {
+			createToast({ body: "Failed to delete monitor." });
 		} finally {
 			setIsLoading(false);
 		}
@@ -51,24 +357,68 @@ export const useDeleteMonitor = () => {
 	return [deleteMonitor, isLoading];
 };
 
+export const useUpdateMonitor = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const navigate = useNavigate();
+	const updateMonitor = async ({ monitor, redirect }) => {
+		try {
+			setIsLoading(true);
+			const updatedFields = {
+				name: monitor.name,
+				statusWindowSize: monitor.statusWindowSize,
+				statusWindowThreshold: monitor.statusWindowThreshold,
+				description: monitor.description,
+				interval: monitor.interval,
+				notifications: monitor.notifications,
+				matchMethod: monitor.matchMethod,
+				expectedValue: monitor.expectedValue,
+				ignoreTlsErrors: monitor.ignoreTlsErrors,
+				jsonPath: monitor.jsonPath,
+				...((monitor.type === "port" || monitor.type === "game") && {
+					port: monitor.port,
+				}),
+				...(monitor.type == "game" && {
+					gameId: monitor.gameId,
+				}),
+				...(monitor.type === "hardware" && {
+					thresholds: monitor.thresholds,
+					secret: monitor.secret,
+					selectedDisks: monitor.selectedDisks,
+				}),
+			};
+			await networkService.updateMonitor({
+				monitorId: monitor.id,
+				updatedFields,
+			});
+
+			createToast({ body: "Monitor updated successfully!" });
+			if (redirect) {
+				navigate(redirect);
+			}
+		} catch (error) {
+			createToast({ body: "Failed to update monitor." });
+		} finally {
+			setIsLoading(false);
+		}
+	};
+	return [updateMonitor, isLoading];
+};
+
 export const usePauseMonitor = () => {
 	const [isLoading, setIsLoading] = useState(false);
-	const [error, setError] = useState(null);
-	const { t } = useTranslation();
-
-	const pauseMonitor = async (monitorId, successCallback = () => {}) => {
+	const [error, setError] = useState(undefined);
+	const pauseMonitor = async ({ monitorId, triggerUpdate }) => {
 		try {
 			setIsLoading(true);
 			const res = await networkService.pauseMonitorById({ monitorId });
-			successCallback();
-			if (res.data.data.isActive === false) {
-				createToast({ body: t("monitorPaused") });
-			} else {
-				createToast({ body: t("monitorResumed") });
-			}
+			createToast({
+				body: res.data.data.isActive
+					? "Monitor resumed successfully"
+					: "Monitor paused successfully",
+			});
+			triggerUpdate();
 		} catch (error) {
-			setError(error.message);
-			createToast({ body: t("failedPauseMonitor") });
+			setError(error);
 		} finally {
 			setIsLoading(false);
 		}
@@ -140,7 +490,7 @@ export const useCreateBulkMonitors = () => {
 
 		try {
 			const response = await networkService.createBulkMonitors(formData);
-			return [true, response.data, null];
+			return [true, response.data, null]; // [success, data, error]
 		} catch (err) {
 			const errorMessage = err?.response?.data?.msg || err.message;
 			return [false, null, errorMessage];
@@ -152,6 +502,39 @@ export const useCreateBulkMonitors = () => {
 	return [createBulkMonitors, isLoading];
 };
 
+export const useExportMonitors = () => {
+	const [isLoading, setIsLoading] = useState(false);
+	const { t } = useTranslation();
+
+	const exportMonitors = async () => {
+		setIsLoading(true);
+		try {
+			const response = await networkService.exportMonitors();
+
+			// Create a download link
+			const url = window.URL.createObjectURL(response.data);
+			const link = document.createElement("a");
+			link.href = url;
+			link.setAttribute("download", "monitors.csv");
+			document.body.appendChild(link);
+			link.click();
+			link.remove();
+			window.URL.revokeObjectURL(url);
+
+			createToast({ body: t("export.success") });
+			return [true, null];
+		} catch (err) {
+			const errorMessage = err?.response?.data?.msg || err.message;
+			createToast({ body: errorMessage || t("export.failed") });
+			return [false, errorMessage];
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	return [exportMonitors, isLoading];
+};
+
 export const useFetchJson = () => {
 	const [isLoading, setIsLoading] = useState(false);
 	const fetchJson = async () => {

client/src/Hooks/useLoginForm.ts

@@ -1,13 +0,0 @@
-import { useMemo } from "react";
-import { loginSchema, type LoginFormData } from "@/Validation/login";
-
-export const useLoginForm = () => {
-	return useMemo(() => {
-		const defaults: LoginFormData = {
-			email: "",
-			password: "",
-		};
-
-		return { schema: loginSchema, defaults };
-	}, []);
-};

client/src/Hooks/useMaintenanceWindowForm.ts

@@ -1,52 +0,0 @@
-import { useMemo } from "react";
-import dayjs from "dayjs";
-import {
-	maintenanceWindowSchema,
-	repeatOptions,
-	type MaintenanceWindowFormData,
-} from "@/Validation/maintenanceWindow";
-import type { MaintenanceWindow } from "@/Types/MaintenanceWindow";
-
-interface UseMaintenanceWindowFormOptions {
-	data?: MaintenanceWindow | null;
-}
-
-const getRepeatId = (repeatMs: number): string => {
-	const option = repeatOptions.find((opt) => opt.value === repeatMs);
-	return option?.id ?? "none";
-};
-
-export const useMaintenanceWindowForm = ({
-	data = null,
-}: UseMaintenanceWindowFormOptions = {}) => {
-	return useMemo(() => {
-		let defaults: MaintenanceWindowFormData;
-
-		if (data) {
-			const startDate = dayjs(data.start);
-
-			defaults = {
-				name: data.name,
-				repeat: getRepeatId(data.repeat),
-				startDate: startDate.format("YYYY-MM-DD"),
-				startTime: startDate.format("HH:mm"),
-				duration: data.duration ?? 0,
-				durationUnit: data.durationUnit ?? "minutes",
-				monitors: [data.monitorId],
-			};
-		} else {
-			const now = dayjs();
-			defaults = {
-				name: "",
-				repeat: "none",
-				startDate: now.format("YYYY-MM-DD"),
-				startTime: now.format("HH:mm"),
-				duration: 0,
-				durationUnit: "minutes",
-				monitors: [],
-			};
-		}
-
-		return { schema: maintenanceWindowSchema, defaults };
-	}, [data]);
-};

client/src/Hooks/useMonitorForm.ts

@@ -1,108 +0,0 @@
-import { useMemo } from "react";
-import { monitorSchema, type MonitorFormData } from "@/Validation/monitor";
-import type { Monitor, MonitorType } from "@/Types/Monitor";
-
-interface UseMonitorFormOptions {
-	data?: Monitor | null;
-	defaultType?: MonitorType;
-}
-
-const getBaseDefaults = (data?: Monitor | null) => ({
-	name: data?.name || "",
-	description: data?.description || "",
-	interval: data?.interval || 60000,
-	notifications: data?.notifications || [],
-	statusWindowSize: data?.statusWindowSize || 5,
-	statusWindowThreshold: data?.statusWindowThreshold || 60,
-});
-
-export const useMonitorForm = ({
-	data = null,
-	defaultType = "http",
-}: UseMonitorFormOptions = {}) => {
-	return useMemo(() => {
-		const type = data?.type || defaultType;
-		const base = getBaseDefaults(data);
-
-		let defaults: MonitorFormData;
-
-		switch (type) {
-			case "http":
-				defaults = {
-					...base,
-					type: "http",
-					url: data?.url || "",
-					ignoreTlsErrors: data?.ignoreTlsErrors || false,
-					useAdvancedMatching: data?.useAdvancedMatching || false,
-					matchMethod: data?.matchMethod || "",
-					expectedValue: data?.expectedValue || "",
-					jsonPath: data?.jsonPath || "",
-				};
-				break;
-			case "ping":
-				defaults = {
-					...base,
-					type: "ping",
-					url: data?.url || "",
-				};
-				break;
-			case "port":
-				defaults = {
-					...base,
-					type: "port",
-					url: data?.url || "",
-					port: data?.port || 80,
-				};
-				break;
-			case "docker":
-				defaults = {
-					...base,
-					type: "docker",
-					url: data?.url || "",
-				};
-				break;
-			case "game":
-				defaults = {
-					...base,
-					type: "game",
-					url: data?.url || "",
-					port: data?.port || 27015,
-					gameId: data?.gameId || "",
-				};
-				break;
-			case "pagespeed":
-				defaults = {
-					...base,
-					type: "pagespeed",
-					url: data?.url || "",
-				};
-				break;
-			case "hardware":
-				defaults = {
-					...base,
-					type: "hardware",
-					url: data?.url || "",
-					secret: data?.secret || "",
-					cpuAlertThreshold: data?.cpuAlertThreshold ?? 80,
-					memoryAlertThreshold: data?.memoryAlertThreshold ?? 80,
-					diskAlertThreshold: data?.diskAlertThreshold ?? 80,
-					tempAlertThreshold: data?.tempAlertThreshold ?? 80,
-					selectedDisks: data?.selectedDisks || [],
-				};
-				break;
-			default:
-				defaults = {
-					...base,
-					type: "http",
-					url: "",
-					ignoreTlsErrors: false,
-					useAdvancedMatching: false,
-					matchMethod: "",
-					expectedValue: "",
-					jsonPath: "",
-				};
-		}
-
-		return { schema: monitorSchema, defaults };
-	}, [data, defaultType]);
-};