Added basic layout

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

@@ -1,71 +1,3 @@
-.maintenance-options .MuiStack-root .MuiStack-root.select-wrapper,
-.maintenance-options .MuiStack-root .field {
-  width: 60%;
-  max-width: 380px;
-}
-
-.date-picker .MuiOutlinedInput-root,
-.time-picker .MuiOutlinedInput-root {
-  height: 34px;
-  font-size: var(--env-var-font-size-medium);
-}
-
-.date-picker .MuiOutlinedInput-root {
-  width: 140px;
-}
-
-.time-picker .MuiOutlinedInput-root {
-  width: 90px;
-}
-
-.maintenance-options .MuiInputAdornment-outlined .MuiIconButton-root svg {
-  width: 20px;
-}
-
-.duration-config .field-text .MuiTextField-root,
-.maintenance-options .duration-config .field {
-  width: 70px;
-  min-width: 70px;
-  max-width: 70px;
-}
-
-.duration-config > .MuiStack-root.select-wrapper {
-  width: 100px;
-}
-
-.duration-config
-  > .MuiStack-root.select-wrapper
-  > .MuiInputBase-root:has(> .MuiSelect-select) {
-  width: 100px;
-  min-width: 100px;
-}
-
-.duration-config > .select-wrapper .select-component > .MuiSelect-select {
-  text-transform: none;
-}
-
-.maintenance-options .add-monitors-fields .field.field-text {
-  width: 100%;
-}
-
-.MuiPopover-paper.MuiMenu-paper.select-dropdown
-  .MuiMenu-list
-  .MuiButtonBase-root {
-  text-transform: none;
-}
-
-.date-picker
-  .MuiOutlinedInput-root
-  .MuiInputAdornment-outlined
-  .MuiIconButton-root {
-  outline: none;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.create-maintenance-window .MuiStack-root .MuiStack-root > button {
-  width: 110px;
-  height: 34px;
+.create-maintenance button {
+  height: 35px;
 }

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

@@ -1,22 +1,74 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { MobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
-import { maintenanceWindowValidation } from "../../../Validation/validation";
-import { logger } from "../../../Utils/Logger";
-import { createToast } from "../../../Utils/toastUtils";
 import Select from "../../../Components/Inputs/Select";
-import dayjs from "dayjs";
 import Field from "../../../Components/Inputs/Field";
+import Breadcrumbs from "../../../Components/Breadcrumbs";
 import "./index.css";
 
 const CreateMaintenance = () => {
   const theme = useTheme();
 
-  return <Box className="create-maintenance"></Box>;
+  return (
+    <Box className="create-maintenance">
+      <Breadcrumbs
+        list={[
+          { name: "mainteanance", path: "/maintenance" },
+          { name: "create", path: `/maintenance/create` },
+        ]}
+      />
+      <Stack
+        component="form"
+        noValidate
+        spellCheck="false"
+        gap={theme.spacing(12)}
+        mt={theme.spacing(6)}
+      >
+        <Typography component="h1" variant="h1">
+          <Typography component="span" fontSize="inherit">
+            Create a{" "}
+          </Typography>
+          <Typography
+            component="span"
+            variant="h2"
+            fontSize="inherit"
+            fontWeight="inherit"
+          >
+            maintenance{" "}
+          </Typography>
+          <Typography component="span" fontSize="inherit">
+            window
+          </Typography>
+        </Typography>
+        <Box
+          width="100%"
+          p={theme.spacing(15)}
+          border={1}
+          borderColor={theme.palette.border.light}
+          borderRadius={theme.shape.borderRadius}
+          backgroundColor={theme.palette.background.main}
+        ></Box>
+        <Box ml="auto" display="inline-block">
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => console.log("disabled")}
+            sx={{ mr: theme.spacing(6) }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => console.log("disabled")}
+            disabled={false}
+          >
+            Create window
+          </Button>
+        </Box>
+      </Stack>
+    </Box>
+  );
 };
 
 export default CreateMaintenance;

Client/src/Pages/Maintenance/index.css

@@ -1,36 +0,0 @@
-.maintenance-checklist-main {
-  max-width: 350px;
-  min-height: 390px;
-  margin: auto;
-  padding: 5px;
-}
-
-.maintenance-image {
-  width: 280px;
-  height: 150px;
-  background-color: whitesmoke;
-  border-radius: 10px;
-}
-
-.maintenance-title {
-  color: var(--secondary-color-light);
-  font-size: 16px;
-  font-weight: bold;
-  margin-top: 40px;
-  margin-bottom: 30px;
-}
-
-.checklist-item {
-  font-size: 13px;
-  color: var(--secondary-color-light);
-  display: flex;
-  margin-bottom: 10px;
-}
-
-.checklist-item-text {
-  margin-left: 10px;
-}
-
-.maintenance-checklist-main .maintenance-checklist-button {
-  margin-top: 30px;
-}