From dfe62bd301d170d93dca57e3ff8494738ea145f9 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Thu, 5 Feb 2026 17:29:27 +0000
Subject: [PATCH] remove old

---
 .../create/Components/ConfigSelect/index.jsx  |  38 --
 .../create/Components/MonitorList/index.jsx   |  71 ---
 .../Components/MonitorsConfig/index.jsx       |  68 ---
 .../create/hooks/useMaintenanceActions.jsx    |  70 ---
 .../create/hooks/useMaintenanceData.jsx       |  76 ----
 client/src/Pages/Maintenance/create/index.css |   3 -
 client/src/Pages/Maintenance/create/old.jsx   | 422 ------------------
 7 files changed, 748 deletions(-)
 delete mode 100644 client/src/Pages/Maintenance/create/Components/ConfigSelect/index.jsx
 delete mode 100644 client/src/Pages/Maintenance/create/Components/MonitorList/index.jsx
 delete mode 100644 client/src/Pages/Maintenance/create/Components/MonitorsConfig/index.jsx
 delete mode 100644 client/src/Pages/Maintenance/create/hooks/useMaintenanceActions.jsx
 delete mode 100644 client/src/Pages/Maintenance/create/hooks/useMaintenanceData.jsx
 delete mode 100644 client/src/Pages/Maintenance/create/index.css
 delete mode 100644 client/src/Pages/Maintenance/create/old.jsx

diff --git a/client/src/Pages/Maintenance/create/Components/ConfigSelect/index.jsx b/client/src/Pages/Maintenance/create/Components/ConfigSelect/index.jsx
deleted file mode 100644
index 8d4c0ae53..000000000
--- a/client/src/Pages/Maintenance/create/Components/ConfigSelect/index.jsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import Select from "@/Components/v1/Inputs/Select/index.jsx";
-import PropTypes from "prop-types";
-const ConfigSelect = ({ configSelection, valueSelect, onChange, ...props }) => {
-	const getValueById = (config, id) => {
-		const item = config.find((config) => config._id === id);
-		return item ? (item.value ? item.value : item.name) : null;
-	};
-
-	const getIdByValue = (config, name) => {
-		const item = config.find((config) => {
-			if (config.value) {
-				return config.value === name;
-			} else {
-				return config.name === name;
-			}
-		});
-		return item ? item._id : null;
-	};
-
-	return (
-		<Select
-			value={getIdByValue(configSelection, valueSelect)}
-			onChange={(event) => {
-				const newValue = getValueById(configSelection, event.target.value);
-				onChange(newValue);
-			}}
-			items={configSelection}
-			{...props}
-		/>
-	);
-};
-
-ConfigSelect.propTypes = {
-	configSelection: PropTypes.array.isRequired,
-	valueSelect: PropTypes.string.isRequired,
-	onChange: PropTypes.func.isRequired,
-};
-export default ConfigSelect;
diff --git a/client/src/Pages/Maintenance/create/Components/MonitorList/index.jsx b/client/src/Pages/Maintenance/create/Components/MonitorList/index.jsx
deleted file mode 100644
index 2bf7a991f..000000000
--- a/client/src/Pages/Maintenance/create/Components/MonitorList/index.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-// Components
-import { Stack, Typography } from "@mui/material";
-import Icon from "@/Components/v1/Icon";
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-
-const MonitorListItem = ({ monitor, onDelete }) => {
-	const theme = useTheme();
-	return (
-		<Stack
-			direction={"row"}
-			alignItems={"center"}
-			gap={theme.spacing(4)}
-			width="100%"
-		>
-			<Typography flexGrow={1}>{monitor.name}</Typography>
-			<Icon
-				name="Trash2"
-				size={20}
-				style={{ cursor: "pointer" }}
-				onClick={() => onDelete(monitor)}
-			/>
-		</Stack>
-	);
-};
-
-MonitorListItem.propTypes = {
-	monitor: PropTypes.shape({
-		id: PropTypes.string.isRequired,
-		name: PropTypes.string.isRequired,
-	}).isRequired,
-	onDelete: PropTypes.func.isRequired,
-};
-
-const MonitorList = ({ selectedMonitors, setSelectedMonitors }) => {
-	const onDelete = (monitorToDelete) => {
-		const newMonitors = selectedMonitors.filter(
-			(monitor) => monitor.id !== monitorToDelete.id
-		);
-		setSelectedMonitors(newMonitors);
-	};
-
-	const theme = useTheme();
-
-	return (
-		<Stack
-			gap={theme.spacing(6)}
-			width="100%"
-		>
-			{selectedMonitors?.map((monitor) => (
-				<MonitorListItem
-					key={monitor.id}
-					monitor={monitor}
-					onDelete={onDelete}
-				/>
-			))}
-		</Stack>
-	);
-};
-
-MonitorList.propTypes = {
-	selectedMonitors: PropTypes.arrayOf(
-		PropTypes.shape({
-			id: PropTypes.string.isRequired,
-			name: PropTypes.string.isRequired,
-		})
-	).isRequired,
-	setSelectedMonitors: PropTypes.func.isRequired,
-};
-
-export default MonitorList;
diff --git a/client/src/Pages/Maintenance/create/Components/MonitorsConfig/index.jsx b/client/src/Pages/Maintenance/create/Components/MonitorsConfig/index.jsx
deleted file mode 100644
index 14920d81c..000000000
--- a/client/src/Pages/Maintenance/create/Components/MonitorsConfig/index.jsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import PropTypes from "prop-types";
-import Search from "@/Components/v1/Inputs/Search/index.jsx";
-import { useState } from "react";
-import ConfigRow from "@/Components/v1/ConfigRow/index.jsx";
-
-/**
- * MonitorsConfig is a component that allows users to select and apply a maintenance window to a list of monitors.
- * It provides a search input to filter monitors and select multiple options. The selected monitors are passed
- * to the parent via the `onSelectMonitors` callback.
- *
- *
- * @component
- *
- * @param {Array} props.monitors - List of available monitors that can be selected.
- * @param {Array} props.selectedMonitors - List of monitors currently selected for applying the maintenance window.
- * @param {string} [props.error] - Optional error message that will be displayed if there's an error in monitor selection.
- * @param {boolean} props.isEditMode - A boolean flag indicating if the component is in edit mode (disabled search/input when true).
- * @param {Function} props.onSelectMonitors - Callback function that is invoked when monitors are selected or deselected.
- * @param {string} [props.secondaryLabel] - Optional label or description that provides additional context for the monitor search.
- */
-
-const MonitorsConfig = ({
-	monitors,
-	selectedMonitors,
-	error,
-	isEditMode,
-	onSelectMonitors,
-	secondaryLabel,
-}) => {
-	const [search, setSearch] = useState("");
-	const handleSearch = (value) => {
-		setSearch(value);
-	};
-
-	return (
-		<ConfigRow
-			title="Monitors for maintenance"
-			description="Select monitors to apply the maintenance window to. Use the search field to filter and choose multiple monitors."
-		>
-			<Search
-				id={"monitors"}
-				label="Add monitors"
-				multiple={true}
-				isAdorned={false}
-				options={monitors || []}
-				filteredBy="name"
-				secondaryLabel={secondaryLabel}
-				inputValue={search}
-				value={selectedMonitors}
-				handleInputChange={handleSearch}
-				handleChange={onSelectMonitors}
-				error={error}
-				disabled={isEditMode}
-			/>
-		</ConfigRow>
-	);
-};
-
-MonitorsConfig.propTypes = {
-	monitors: PropTypes.array.isRequired,
-	selectedMonitors: PropTypes.array.isRequired,
-	error: PropTypes.string,
-	isEditMode: PropTypes.bool.isRequired,
-	onSelectMonitors: PropTypes.func.isRequired,
-	secondaryLabel: PropTypes.string,
-};
-
-export default MonitorsConfig;
diff --git a/client/src/Pages/Maintenance/create/hooks/useMaintenanceActions.jsx b/client/src/Pages/Maintenance/create/hooks/useMaintenanceActions.jsx
deleted file mode 100644
index a5e853160..000000000
--- a/client/src/Pages/Maintenance/create/hooks/useMaintenanceActions.jsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { networkService } from "../../../../main.jsx";
-import dayjs from "dayjs";
-import {
-	MS_PER_SECOND,
-	MS_PER_MINUTE,
-	MS_PER_HOUR,
-	MS_PER_DAY,
-	MS_PER_WEEK,
-} from "../../../../Utils/timeUtilsLegacy.js";
-
-const useMaintenanceActions = () => {
-	const MS_LOOKUP = {
-		seconds: MS_PER_SECOND,
-		minutes: MS_PER_MINUTE,
-		hours: MS_PER_HOUR,
-		days: MS_PER_DAY,
-		weeks: MS_PER_WEEK,
-	};
-	const REPEAT_LOOKUP = {
-		none: 0,
-		daily: MS_PER_DAY,
-		weekly: MS_PER_DAY * 7,
-	};
-	const handleSubmitForm = async (maintenanceWindowId, form) => {
-		const toStringId = (monitor) => {
-			if (!monitor) {
-				return "";
-			}
-			return monitor._id ?? monitor.id ?? "";
-		};
-		const start = dayjs(form.startDate)
-			.set("hour", form.startTime.hour())
-			.set("minute", form.startTime.minute());
-
-		const MS_MULTIPLIER = MS_LOOKUP[form.durationUnit];
-		const durationInMs = form.duration * MS_MULTIPLIER;
-		const end = start.add(durationInMs);
-
-		const repeat = REPEAT_LOOKUP[form.repeat];
-
-		const submit = {
-			monitors: form.monitors.map((monitor) => toStringId(monitor)).filter(Boolean),
-			name: form.name,
-			start: start.toISOString(),
-			end: end.toISOString(),
-			repeat,
-		};
-
-		if (repeat === 0) {
-			submit.expiry = end;
-		}
-
-		const requestConfig = { maintenanceWindow: submit };
-
-		if (maintenanceWindowId !== undefined) {
-			requestConfig.maintenanceWindowId = maintenanceWindowId;
-		}
-		const request =
-			maintenanceWindowId === undefined
-				? networkService.createMaintenanceWindow(requestConfig)
-				: networkService.editMaintenanceWindow(requestConfig);
-		return request;
-	};
-
-	return {
-		handleSubmitForm,
-	};
-};
-
-export default useMaintenanceActions;
diff --git a/client/src/Pages/Maintenance/create/hooks/useMaintenanceData.jsx b/client/src/Pages/Maintenance/create/hooks/useMaintenanceData.jsx
deleted file mode 100644
index 4ab56bef9..000000000
--- a/client/src/Pages/Maintenance/create/hooks/useMaintenanceData.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { networkService } from "../../../../main.jsx";
-import dayjs from "dayjs";
-import {
-	MS_PER_SECOND,
-	MS_PER_MINUTE,
-	MS_PER_HOUR,
-	MS_PER_DAY,
-	MS_PER_WEEK,
-} from "../../../../Utils/timeUtilsLegacy.js";
-const useMaintenanceData = () => {
-	const REVERSE_REPEAT_LOOKUP = {
-		0: "none",
-		[MS_PER_DAY]: "daily",
-		[MS_PER_WEEK]: "weekly",
-	};
-	const getDurationAndUnit = (durationInMs) => {
-		if (durationInMs % MS_PER_DAY === 0) {
-			return {
-				duration: (durationInMs / MS_PER_DAY).toString(),
-				durationUnit: "days",
-			};
-		} else if (durationInMs % MS_PER_HOUR === 0) {
-			return {
-				duration: (durationInMs / MS_PER_HOUR).toString(),
-				durationUnit: "hours",
-			};
-		} else if (durationInMs % MS_PER_MINUTE === 0) {
-			return {
-				duration: (durationInMs / MS_PER_MINUTE).toString(),
-				durationUnit: "minutes",
-			};
-		} else {
-			return {
-				duration: (durationInMs / MS_PER_SECOND).toString(),
-				durationUnit: "seconds",
-			};
-		}
-	};
-	const fetchMonitorsMaintenance = async () => {
-		const response = await networkService.getMonitorsByTeamId({
-			limit: null,
-			types: ["http", "ping", "pagespeed", "port"],
-		});
-		const fetchedMonitors = response.data.data;
-		return fetchedMonitors;
-	};
-
-	const initializeMaintenanceForEdit = async (maintenanceWindowId, monitorList) => {
-		const res = await networkService.getMaintenanceWindowById({
-			maintenanceWindowId: maintenanceWindowId,
-		});
-		const maintenanceWindow = res.data.data;
-		const { name, start, end, repeat, monitorId } = maintenanceWindow;
-		const startTime = dayjs(start);
-		const endTime = dayjs(end);
-		const durationInMs = endTime.diff(startTime, "milliseconds").toString();
-		const { duration, durationUnit } = getDurationAndUnit(durationInMs);
-		const monitor = monitorList.find(
-			(monitor) => (monitor._id ?? monitor.id) === monitorId
-		);
-		const maintenanceWindowInformation = {
-			name,
-			repeat: REVERSE_REPEAT_LOOKUP[repeat],
-			startDate: startTime,
-			startTime,
-			duration,
-			durationUnit,
-			monitors: monitor ? [monitor] : [],
-		};
-		return maintenanceWindowInformation;
-	};
-
-	return { fetchMonitorsMaintenance, initializeMaintenanceForEdit };
-};
-
-export default useMaintenanceData;
diff --git a/client/src/Pages/Maintenance/create/index.css b/client/src/Pages/Maintenance/create/index.css
deleted file mode 100644
index fc688124f..000000000
--- a/client/src/Pages/Maintenance/create/index.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.create-maintenance button {
-	height: 35px;
-}
diff --git a/client/src/Pages/Maintenance/create/old.jsx b/client/src/Pages/Maintenance/create/old.jsx
deleted file mode 100644
index af3f34512..000000000
--- a/client/src/Pages/Maintenance/create/old.jsx
+++ /dev/null
@@ -1,422 +0,0 @@
-import { Box, Button, Stack, Typography } from "@mui/material";
-import { useSelector } from "react-redux";
-import { useTheme } from "@emotion/react";
-import { useEffect, useState } from "react";
-import ConfigBox from "@/Components/v1/ConfigBox/index.jsx";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
-import { maintenanceWindowValidation } from "@/Validation/validation.js";
-import { createToast } from "@/Utils/toastUtils.jsx";
-import MonitorList from "./Components/MonitorList/index.jsx";
-import ConfigSelect from "./Components/ConfigSelect/index.jsx";
-import useMaintenanceData from "./hooks/useMaintenanceData.jsx";
-import useMaintenanceActions from "./hooks/useMaintenanceActions.jsx";
-
-import TextInput from "@/Components/v1/Inputs/TextInput/index.jsx";
-import Breadcrumbs from "@/Components/v1/Breadcrumbs/index.jsx";
-import Icon from "@/Components/v1/Icon";
-import "./index.css";
-import Search from "@/Components/v1/Inputs/Search/index.jsx";
-import { logger } from "@/Utils/Logger.js";
-
-import { useNavigate, useParams } from "react-router-dom";
-import { buildErrors, hasValidationErrors } from "@/Validation/error.js";
-import { useTranslation } from "react-i18next";
-import dayjs from "dayjs";
-
-const repeatConfig = [
-	{ _id: 0, name: "Don't repeat", value: "none" },
-	{
-		_id: 1,
-		name: "Repeat daily",
-		value: "daily",
-	},
-	{ _id: 2, name: "Repeat weekly", value: "weekly" },
-];
-
-const durationConfig = [
-	{ _id: 0, name: "seconds" },
-	{ _id: 1, name: "minutes" },
-	{ _id: 2, name: "hours" },
-	{
-		_id: 3,
-		name: "days",
-	},
-];
-
-const CreateMaintenance = () => {
-	const { maintenanceWindowId } = useParams();
-	const { handleSubmitForm } = useMaintenanceActions();
-	const { fetchMonitorsMaintenance, initializeMaintenanceForEdit } = useMaintenanceData();
-	const navigate = useNavigate();
-	const theme = useTheme();
-	const { t } = useTranslation();
-	const { user } = useSelector((state) => state.auth);
-	const [monitors, setMonitors] = useState([]);
-	const [search, setSearch] = useState("");
-	const [isLoading, setIsLoading] = useState(false);
-	const [errors, setErrors] = useState({});
-	const [form, setForm] = useState({
-		repeat: "none",
-		startDate: dayjs(),
-		startTime: dayjs(),
-		duration: "",
-		durationUnit: "seconds",
-		name: "",
-		monitors: [],
-	});
-	const handleFormChange = (key, value) => {
-		setForm((prev) => ({ ...prev, [key]: value }));
-		const { error } = maintenanceWindowValidation.validate(
-			{ [key]: value },
-			{ abortEarly: false }
-		);
-		setErrors((prev) => {
-			return buildErrors(prev, key, error);
-		});
-	};
-
-	useEffect(() => {
-		const fetchMonitors = async () => {
-			setIsLoading(true);
-			try {
-				const fetchedMonitors = await fetchMonitorsMaintenance();
-				setMonitors(fetchedMonitors);
-
-				if (maintenanceWindowId === undefined) {
-					return;
-				}
-				const maintenanceWindowInformation = await initializeMaintenanceForEdit(
-					maintenanceWindowId,
-					fetchedMonitors
-				);
-				setForm((prev) => ({
-					...prev,
-					...maintenanceWindowInformation,
-				}));
-			} catch (error) {
-				createToast({ body: "Failed to fetch data" });
-				logger.error("Failed to fetch monitors", error);
-			} finally {
-				setIsLoading(false);
-			}
-		};
-		fetchMonitors();
-	}, [user]);
-
-	const handleSubmit = async () => {
-		if (hasValidationErrors(form, maintenanceWindowValidation, setErrors)) return;
-
-		const request = handleSubmitForm(maintenanceWindowId, form);
-		try {
-			setIsLoading(true);
-			await request;
-			createToast({
-				body: "Successfully created maintenance window",
-			});
-			navigate("/maintenance");
-		} catch (error) {
-			createToast({
-				body: `Failed to ${
-					maintenanceWindowId === undefined ? "create" : "edit"
-				} maintenance window`,
-			});
-			logger.error(error);
-		} finally {
-			setIsLoading(false);
-		}
-	};
-
-	return (
-		<Box className="create-maintenance">
-			<Breadcrumbs
-				list={[
-					{ name: "maintenance", path: "/maintenance" },
-					{
-						name: maintenanceWindowId === undefined ? "create" : "edit",
-						path: `/maintenance/create`,
-					},
-				]}
-			/>
-			<Stack
-				component="form"
-				noValidate
-				spellCheck="false"
-				gap={theme.spacing(12)}
-				mt={theme.spacing(6)}
-			>
-				<Box>
-					<Typography
-						component="h1"
-						variant="h1"
-					>
-						<Typography
-							component="span"
-							fontSize="inherit"
-						>
-							{`${maintenanceWindowId === undefined ? t("createA") : t("edit")}`}{" "}
-						</Typography>
-						<Typography
-							component="span"
-							variant="h2"
-							fontSize="inherit"
-							fontWeight="inherit"
-						>
-							{t("maintenance")}{" "}
-						</Typography>
-						<Typography
-							component="span"
-							fontSize="inherit"
-						>
-							{t("window")}
-						</Typography>
-					</Typography>
-					<Typography
-						component="h2"
-						variant="body2"
-						fontSize={14}
-					>
-						{t("maintenanceWindowDescription")}
-					</Typography>
-				</Box>
-				<ConfigBox>
-					<Box>
-						<Typography
-							component="h2"
-							variant="h2"
-						>
-							{t("settingsGeneralSettings")}
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(15)}>
-						<TextInput
-							id="name"
-							label={t("friendlyNameInput")}
-							placeholder={t("friendlyNamePlaceholder")}
-							value={form.name}
-							onChange={(event) => {
-								handleFormChange("name", event.target.value);
-							}}
-							error={errors["name"] ? true : false}
-							helperText={errors["name"]}
-						/>
-						<ConfigSelect
-							id="repeat"
-							name="maintenance-repeat"
-							label={t("maintenanceRepeat")}
-							valueSelect={form.repeat}
-							configSelection={repeatConfig}
-							onChange={(value) => handleFormChange("repeat", value)}
-						/>
-						<Stack>
-							<LocalizationProvider dateAdapter={AdapterDayjs}>
-								<DatePicker
-									id="startDate"
-									disablePast
-									disableHighlightToday
-									value={form.startDate}
-									slots={{
-										openPickerIcon: () => (
-											<Icon
-												name="Calendar"
-												size={20}
-											/>
-										),
-									}}
-									slotProps={{
-										switchViewButton: { sx: { display: "none" } },
-										nextIconButton: { sx: { ml: theme.spacing(2) } },
-										day: {
-											sx: {
-												"&.MuiPickersDay-root.Mui-disabled": {
-													color: theme.palette.primary.contrastTextTertiary,
-												},
-											},
-										},
-										field: {
-											sx: {
-												width: "fit-content",
-												"& > .MuiOutlinedInput-root": {
-													flexDirection: "row-reverse",
-												},
-												"& input": {
-													minHeight: 34,
-													p: 0,
-													pr: theme.spacing(5),
-												},
-												"& fieldset": {
-													borderColor: theme.palette.primary.lowContrast,
-													borderRadius: theme.shape.borderRadius,
-												},
-												"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
-													{
-														borderColor: theme.palette.primary.lowContrast,
-													},
-											},
-										},
-										inputAdornment: { sx: { ml: 0, px: 3 } },
-										openPickerButton: {
-											sx: {
-												py: 0,
-												mr: 0,
-												"& path": {
-													stroke: theme.palette.primary.contrastTextTertiary,
-													strokeWidth: 1.1,
-												},
-												"&:hover": { backgroundColor: "transparent" },
-											},
-										},
-									}}
-									sx={{}}
-									onChange={(newDate) => {
-										handleFormChange("startDate", newDate);
-									}}
-									error={errors["startDate"]}
-								/>
-							</LocalizationProvider>
-						</Stack>
-					</Stack>
-				</ConfigBox>
-				<ConfigBox>
-					<Box>
-						<Typography
-							component="h2"
-							variant="h2"
-						>
-							{t("startTime")}
-						</Typography>
-						<Typography> {t("timeZoneInfo")} </Typography>
-					</Box>
-					<Stack gap={theme.spacing(15)}>
-						<LocalizationProvider dateAdapter={AdapterDayjs}>
-							<MobileTimePicker
-								id="startTime"
-								label={t("startTime")}
-								value={form.startTime}
-								onChange={(newTime) => {
-									handleFormChange("startTime", newTime);
-								}}
-								slotProps={{
-									nextIconButton: { sx: { ml: theme.spacing(2) } },
-									field: {
-										sx: {
-											width: "fit-content",
-											"& > .MuiOutlinedInput-root": {
-												flexDirection: "row-reverse",
-											},
-											"& input": {
-												minHeight: 34,
-												p: 0,
-												pl: theme.spacing(5),
-											},
-											"& fieldset": {
-												borderColor: theme.palette.primary.lowContrast,
-												borderRadius: theme.shape.borderRadius,
-											},
-											"&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
-												{
-													borderColor: theme.palette.primary.lowContrast,
-												},
-										},
-									},
-								}}
-								error={errors["startTime"]}
-							/>
-						</LocalizationProvider>
-
-						<Stack
-							direction="row"
-							alignItems="end"
-							spacing={theme.spacing(8)}
-						>
-							<TextInput
-								type="number"
-								id="duration"
-								label={t("duration")}
-								value={form.duration}
-								onChange={(event) => {
-									handleFormChange("duration", event.target.value);
-								}}
-								error={errors["duration"] ? true : false}
-								helperText={errors["duration"]}
-							/>
-							<ConfigSelect
-								id="durationUnit"
-								valueSelect={form.durationUnit}
-								configSelection={durationConfig}
-								onChange={(value) => handleFormChange("durationUnit", value)}
-								error={errors["durationUnit"]}
-							/>
-						</Stack>
-					</Stack>
-				</ConfigBox>
-
-				<ConfigBox>
-					<Box>
-						<Typography
-							component="h2"
-							variant="h2"
-						>
-							{t("monitorsToApply")}
-						</Typography>
-					</Box>
-					<Stack gap={theme.spacing(15)}>
-						<Search
-							id={"monitors"}
-							label={t("addMonitors")}
-							multiple={true}
-							isAdorned={true}
-							options={monitors}
-							filteredBy="name"
-							secondaryLabel={"type"}
-							inputValue={search}
-							value={form.monitors}
-							handleInputChange={setSearch}
-							handleChange={(selected) => {
-								handleFormChange("monitors", selected);
-							}}
-							error={errors["monitors"]}
-						/>
-						<MonitorList
-							selectedMonitors={form.monitors}
-							setSelectedMonitors={(monitors) =>
-								setForm((prev) => ({ ...prev, monitors }))
-							}
-						/>
-					</Stack>
-				</ConfigBox>
-
-				<Box
-					ml="auto"
-					display="inline-block"
-				>
-					<Button
-						variant="contained"
-						color="secondary"
-						onClick={() => navigate("/maintenance")}
-						sx={{ mr: theme.spacing(6) }}
-					>
-						{t("cancel")}
-					</Button>
-					<Button
-						loading={isLoading}
-						variant="contained"
-						color="accent"
-						onClick={handleSubmit}
-						disabled={false}
-					>
-						{`${
-							maintenanceWindowId === undefined
-								? t("createMaintenance")
-								: t("editMaintenance")
-						}`}
-					</Button>
-				</Box>
-			</Stack>
-		</Box>
-	);
-};
-
-export default CreateMaintenance;