completing create new maintenance window (no-repeat) UI

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.css

@@ -1,11 +1,18 @@
-.maintenance-options > .MuiStack-root > .MuiStack-root.select-wrapper {
-  width: 380px;
+.maintenance-options {
+  > .MuiStack-root {
+    > .MuiStack-root.select-wrapper,
+    .field {
+      width: 380px;
+    }
+  }
 }
 
-.date-picker .MuiOutlinedInput-root,
-.time-picker .MuiOutlinedInput-root {
-  height: 34px;
-  font-size: var(--env-var-font-size-medium);
+.date-picker,
+.time-picker {
+  .MuiOutlinedInput-root {
+    height: 34px;
+    font-size: var(--env-var-font-size-medium);
+  }
 }
 
 .date-picker .MuiOutlinedInput-root {
@@ -19,3 +26,24 @@
 .MuiInputAdornment-outlined .MuiIconButton-root svg {
   width: 20px;
 }
+
+.duration-config {
+  .field-text .MuiTextField-root,
+  .field {
+    width: 70px;
+    min-width: 70px;
+    max-width: 70px;
+  }
+
+  > .MuiStack-root.select-wrapper {
+    width: 100px;
+
+    > .MuiInputBase-root:has(> .MuiSelect-select) {
+      min-width: 100px;
+    }
+  }
+
+  .select-wrapper .select-component > .MuiSelect-select {
+    text-transform: none;
+  }
+}

Client/src/Pages/Maintenance/CreateMaintenanceWindow/index.jsx

@@ -9,6 +9,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import dayjs from "dayjs";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
+import Field from "../../../Components/Inputs/Field";
 
 const directory = {
   title: "Create a maintenance window",
@@ -45,9 +46,29 @@ const configOptionTitle = (title, description) => {
   );
 };
 
+const timeFrames = [
+  { _id: "seconds", name: "seconds" },
+  { _id: "minutes", name: "minutes" },
+  { _id: "hours", name: "hours" },
+  { _id: "days", name: "days" },
+];
+
+const sxButtons = {
+  width: 110,
+  height: 34,
+};
+
 const CreateNewMaintenanceWindow = () => {
   const [values, setValues] = useState({
     repeat: 1,
+    date: dayjs(),
+    startTime: dayjs(),
+    duration: {
+      value: "60",
+      unit: "minutes",
+    },
+    friendlyName: "",
+    AddMonitors: "",
   });
 
   const handleChange = (event, name) => {
@@ -77,7 +98,13 @@ const CreateNewMaintenanceWindow = () => {
           className="date-localization-provider"
           dateAdapter={AdapterDayjs}
         >
-          <DatePicker className="date-picker" defaultValue={dayjs()} />
+          <DatePicker
+            className="date-picker"
+            defaultValue={values.date}
+            onChange={(date) =>
+              handleChange({ target: { value: date } }, "date")
+            }
+          />
         </LocalizationProvider>
       ),
     },
@@ -89,10 +116,68 @@ const CreateNewMaintenanceWindow = () => {
           className="time-localization-provider"
           dateAdapter={AdapterDayjs}
         >
-          <MobileTimePicker className="time-picker" defaultValue={dayjs()} />
+          <MobileTimePicker
+            className="time-picker"
+            defaultValue={values.startTime}
+            onChange={(time) =>
+              handleChange({ target: { value: time } }, "startTime")
+            }
+          />
         </LocalizationProvider>
       ),
     },
+    {
+      title: "Duration",
+      component: (
+        <Stack className="duration-config" gap={2} direction="row">
+          <Field
+            id="duration-value"
+            placeholder="60"
+            onChange={(e) => handleChange(e, "duration")}
+            value={values.duration.value}
+          />
+          <Select
+            onChange={(e) => handleChange(e, "duration.unit")}
+            id="duration-unit"
+            items={timeFrames}
+            value={values.duration.unit}
+          />
+        </Stack>
+      ),
+    },
+    {
+      title: "Friendly name",
+      component: (
+        <Field
+          id="friendly-name"
+          placeholder="Maintanence at __ : __ for ___ minutes"
+          value={values.friendlyName}
+          onChange={(e) => handleChange(e, "friendlyName")}
+        />
+      ),
+    },
+    {
+      title: "Add monitors",
+      component: (
+        <Stack gap={2}>
+          <Field
+            id="add-monitors"
+            placeholder="Start typing to search for current monitors"
+            value={values.AddMonitors}
+            onChange={(e) => handleChange(e, "AddMonitors")}
+          />
+          <Typography
+            sx={{
+              fontSize: "var(--env-var-font-size-small)",
+              borderBottom: "1px dashed var(--env-var-color-3)",
+              paddingBottom: 1,
+            }}
+          >
+            Add all monitors to this maintenance window
+          </Typography>
+        </Stack>
+      ),
+    },
   ];
 
   return (
@@ -127,22 +212,27 @@ const CreateNewMaintenanceWindow = () => {
           </Typography>
         </Box>
         <Stack
+          className="maintenance-options"
           gap={5}
           paddingY={4}
           paddingX={8}
+          paddingBottom={10}
           sx={{
             border: "1px solid var(--env-var-color-16)",
             borderRadius: "var(--env-var-radius-1)",
           }}
-          className="maintenance-options"
         >
           {configOptions.map((item, index) => (
             <Stack key={index} display="-webkit-inline-box">
-              {configOptionTitle(item.title, item.description)}
+              {item.title && configOptionTitle(item.title, item.description)}
               {item.component && item.component}
             </Stack>
           ))}
         </Stack>
+        <Stack justifyContent="end" direction="row" marginTop={3}>
+          <Button sx={sxButtons} level="tertiary" label="Cancel" />
+          <Button sx={sxButtons} level="primary" label="Create" />
+        </Stack>
       </Stack>
     </div>
   );