Added Calendar field

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

@@ -1,11 +1,15 @@
 import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import { useState } from "react";
+import { ConfigBox } from "./styled";
+import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
+import { LocalizationProvider } from "@mui/x-date-pickers";
+import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import Select from "../../../Components/Inputs/Select";
 import Field from "../../../Components/Inputs/Field";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import CalendarIcon from "../../../assets/icons/calendar.svg?react";
 import "./index.css";
-import { ConfigBox } from "./styled";
 
 const repeatConfig = [
   { _id: 0, name: "Don't repeat" },
@@ -69,8 +73,7 @@ const CreateMaintenance = () => {
             General Settings
           </Typography>
           <Box
-            pl={theme.spacing(18)}
-            pr={theme.spacing(8)}
+            px={theme.spacing(14)}
             borderLeft={1}
             borderLeftColor={theme.palette.border.light}
           >
@@ -80,9 +83,54 @@ const CreateMaintenance = () => {
               value={0}
               items={repeatConfig}
             />
-            <Box mt={theme.spacing(16)}>
-              <Typography component="h3">Days</Typography>
-            </Box>
+            <Stack gap={theme.spacing(2)} mt={theme.spacing(16)}>
+              <Typography component="h3">Date</Typography>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <DatePicker
+                  disablePast
+                  disableHighlightToday
+                  slots={{ openPickerIcon: CalendarIcon }}
+                  slotProps={{
+                    switchViewButton: { sx: { display: "none" } },
+                    nextIconButton: { sx: { ml: theme.spacing(2) } },
+                    field: {
+                      sx: {
+                        width: "fit-content",
+                        "& > .MuiOutlinedInput-root": {
+                          flexDirection: "row-reverse",
+                        },
+                        "& input": {
+                          height: 34,
+                          p: 0,
+                          pr: theme.spacing(5),
+                        },
+                        "& fieldset": {
+                          borderColor: theme.palette.border.dark,
+                          borderRadius: theme.shape.borderRadius,
+                        },
+                        "&:not(:has(.Mui-disabled)):not(:has(.Mui-error)) .MuiOutlinedInput-root:not(:has(input:focus)):hover fieldset":
+                          {
+                            borderColor: theme.palette.border.dark,
+                          },
+                      },
+                    },
+                    inputAdornment: { sx: { ml: 0, px: 3 } },
+                    openPickerButton: {
+                      sx: {
+                        py: 0,
+                        mr: 0,
+                        "& path": {
+                          stroke: theme.palette.other.icon,
+                          strokeWidth: 1.1,
+                        },
+                        "&:hover": { backgroundColor: "transparent" },
+                      },
+                    },
+                  }}
+                  sx={{}}
+                />
+              </LocalizationProvider>
+            </Stack>
           </Box>
         </ConfigBox>
         <ConfigBox>
@@ -156,7 +204,7 @@ const CreateMaintenance = () => {
             onClick={() => console.log("disabled")}
             disabled={false}
           >
-            Create window
+            Create maintenance
           </Button>
         </Box>
       </Stack>

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

@@ -13,8 +13,13 @@ export const ConfigBox = styled(Stack)(({ theme }) => ({
   "& > div:last-of-type, & > .MuiStack-root > div:last-of-type": {
     flex: 1,
   },
+  "& > .MuiStack-root > div:first-of-type": { paddingRight: theme.spacing(14) },
+  "& > .MuiStack-root > div:last-of-type": {
+    paddingLeft: theme.spacing(14),
+  },
   "& h2": { fontSize: 13.5, fontWeight: 500 },
   "& h3, & p": {
     color: theme.palette.text.tertiary,
   },
+  "& h3": { fontWeight: 500 },
 }));

Client/src/assets/icons/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.5 8.33342H1.5M12.3333 1.66675V5.00008M5.66667 1.66675V5.00008M5.5 18.3334H12.5C13.9001 18.3334 14.6002 18.3334 15.135 18.0609C15.6054 17.8212 15.9878 17.4388 16.2275 16.9684C16.5 16.4336 16.5 15.7335 16.5 14.3334V7.33342C16.5 5.93328 16.5 5.23322 16.2275 4.69844C15.9878 4.22803 15.6054 3.84558 15.135 3.6059C14.6002 3.33341 13.9001 3.33341 12.5 3.33341H5.5C4.09987 3.33341 3.3998 3.33341 2.86502 3.6059C2.39462 3.84558 2.01217 4.22803 1.77248 4.69844C1.5 5.23322 1.5 5.93328 1.5 7.33341V14.3334C1.5 15.7335 1.5 16.4336 1.77248 16.9684C2.01217 17.4388 2.39462 17.8212 2.86502 18.0609C3.3998 18.3334 4.09987 18.3334 5.5 18.3334Z" stroke="#344054" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>