close button dialog

src/components/dashboard/damages/operator/Actions/create/Forms/index.jsx

@@ -1,9 +1,10 @@
 "use client";
-import { Dialog } from "@mui/material";
+import { Dialog, IconButton } from "@mui/material";
 import CreateFormContent from "./CreateFormContent";
 import { format } from "date-fns";
 import { CREATE_DAMAGE } from "@/core/utils/routes";
 import useRequest from "@/lib/hooks/useRequest";
+import CloseIcon from "@mui/icons-material/Close";
 
 const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     const requestServer = useRequest({ notificationSuccess: true });
@@ -74,6 +75,19 @@ const OperatorCreateForm = ({ open, setOpen, mutate }) => {
     };
     return (
         <Dialog open={open} fullWidth maxWidth="md">
+            <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
                     defaultData={defaultData}

src/components/dashboard/damages/operator/Form/EditForm/index.jsx

@@ -2,6 +2,7 @@ import { Dialog, DialogTitle, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import BorderColorIcon from "@mui/icons-material/BorderColor";
 import EditController from "./EditController";
+import CloseIcon from "@mui/icons-material/Close";
 
 const EditForm = ({ row, mutate, rowId }) => {
     const [openEditDialog, setOpenEditDialog] = useState(false);
@@ -29,6 +30,19 @@ const EditForm = ({ row, mutate, rowId }) => {
                     },
                 }}
             >
+                <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 && (
                     <EditController
                         openEditDialog={openEditDialog}

src/components/dashboard/damages/operator/Form/RegisterInsurance/index.jsx

@@ -2,6 +2,7 @@ import { Dialog, IconButton, Tooltip } from "@mui/material";
 import { useState } from "react";
 import ReceiptIcon from "@mui/icons-material/Receipt";
 import RegisterInsuranceContent from "./RegisterInsuranceContent";
+import CloseIcon from "@mui/icons-material/Close";
 
 const RegisterInsurance = ({ row, mutate, rowId }) => {
     const [openRegisterInsuranceDialog, setOpenRegisterInsuranceDialog] = useState(false);
@@ -24,6 +25,19 @@ const RegisterInsurance = ({ row, mutate, rowId }) => {
                 maxWidth={"sm"}
                 scroll="paper"
             >
+                <IconButton
+                    aria-label="close"
+                    onClick={() => setOpenRegisterInsuranceDialog(false)}
+                    sx={(theme) => ({
+                        position: "absolute",
+                        right: 8,
+                        top: 8,
+                        zIndex: 50,
+                        color: theme.palette.grey[500],
+                    })}
+                >
+                    <CloseIcon />
+                </IconButton>
                 {openRegisterInsuranceDialog && (
                     <RegisterInsuranceContent
                         rowId={rowId}