close button dialog

src/components/dashboard/damageItems/Actions/Create/Form/index.jsx

@@ -1,9 +1,23 @@
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import CreateFormContent from "./CreateFormContent";
+import CloseIcon from "@mui/icons-material/Close";
 
 const CreateForm = ({ open, setOpen, mutate }) => {
     return (
         <Dialog open={open} fullWidth maxWidth="xs">
+            <IconButton
+                aria-label="close"
+                onClick={() => setOpen(false)}
+                sx={(theme) => ({
+                    position: "absolute",
+                    right: 8,
+                    top: 8,
+                    zIndex: 50,
+                    color: theme.palette.grey[500],
+                })}
+            >
+                <CloseIcon />
+            </IconButton>
             {open && <CreateFormContent setOpen={setOpen} mutate={mutate} />}
         </Dialog>
     );

src/components/dashboard/damageItems/RowActions/Edit/index.jsx

@@ -2,6 +2,7 @@ import BorderColorIcon from "@mui/icons-material/BorderColor";
 import { Dialog, IconButton, Tooltip } from "@mui/material";
 import EditFormContent from "./Form";
 import { useState } from "react";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Edit = ({ row, mutate, rowId }) => {
     const [openEditDialog, setOpenEditDialog] = useState(false);
@@ -20,6 +21,19 @@ const Edit = ({ row, mutate, rowId }) => {
                 </IconButton>
             </Tooltip>
             <Dialog open={openEditDialog} fullWidth maxWidth="xs">
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenEditDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openEditDialog && (
                     <EditFormContent rowId={rowId} row={row} setOpen={setOpenEditDialog} mutate={mutate} />
                 )}