From 5466d38496c3067f8f092b4259ed98dd358c9bd5 Mon Sep 17 00:00:00 2001
From: Owaise Imdad <owaiseimdad@gmail.com>
Date: Sat, 15 Mar 2025 01:44:00 +0530
Subject: [PATCH] FIX-1930 have made initial changes in order to proceed with
 rebuidling.

---
 .../Components/ConfigRow/index.jsx            | 34 +++++++++++++
 .../Components/MonitorsConfig/index.jsx       | 49 +++++++++++++++++++
 2 files changed, 83 insertions(+)
 create mode 100644 src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx
 create mode 100644 src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx

diff --git a/src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx b/src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx
new file mode 100644
index 000000000..93709ef1e
--- /dev/null
+++ b/src/Pages/Maintenance/CreateMaintenance/Components/ConfigRow/index.jsx
@@ -0,0 +1,34 @@
+import { Box, Stack, Typography } from "@mui/material";
+import PropTypes from "prop-types";
+import { useTheme } from "@emotion/react";
+import ConfigBox from "../../../../../Components/ConfigBox";
+
+const ConfigRow = ({ title, description, children }) => {
+  const theme = useTheme();
+
+  return (
+    <ConfigBox>
+      <Box>
+        <Typography component="h2" variant="h2">
+          {title}
+        </Typography>
+        {description && (
+          <Typography variant="body2" mt={theme.spacing(2)}>
+            {description}
+          </Typography>
+        )}
+      </Box>
+      <Stack gap={theme.spacing(15)} mt={theme.spacing(4)}>
+        {children}
+      </Stack>
+    </ConfigBox>
+  );
+};
+
+ConfigRow.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string,
+  children: PropTypes.node
+};
+
+export default ConfigRow;
\ No newline at end of file
diff --git a/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx b/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
new file mode 100644
index 000000000..f8955a873
--- /dev/null
+++ b/src/Pages/Maintenance/CreateMaintenance/Components/MonitorsConfig/index.jsx
@@ -0,0 +1,49 @@
+import PropTypes from "prop-types";
+import ConfigRow from "../ConfigRow";
+import Search from "../../../../../Components/Inputs/Search";
+import { useState } from "react";
+
+const MonitorsConfig = ({
+	monitors,
+	selectedMonitors,
+	error,
+	isEditMode,
+	onSelectMonitors,
+	secondaryLabelText,
+}) => {
+	const [search, setSearch] = useState("");
+	const handleSearch = (value) => {
+		setSearch(value);
+	};
+
+	return (
+		<ConfigRow title="Monitors to apply maintenance window to">
+			<Search
+				id={"monitors"}
+				label="Add monitors"
+				multiple={true}
+				isAdorned={false}
+				options={monitors || []}
+				filteredBy="name"
+				secondaryLabel={secondaryLabelText}
+				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,
+	secondaryLabelText: PropTypes.string,
+};
+
+export default MonitorsConfig;