Add user form and fix bug

hotel-management/src/pages/User/Dialog.tsx

@@ -0,0 +1,39 @@
+import { forwardRef, useEffect } from 'react';
+
+// Components
+import Dialog from '../../components/Dialog';
+import UserForm from './Form';
+
+// Interfaces
+import { IDialogProps } from '../../globals/interfaces';
+
+const UserDialog = forwardRef((props, ref) => {
+  const dialogRef = ref as React.MutableRefObject<
+    HTMLDialogElement | undefined
+  >;
+  const { onClose } = props;
+
+  useEffect(() => {
+    if (dialogRef.current) {
+      dialogRef.current.addEventListener('click', (e: MouseEvent) => {
+        const dialogDimensions = dialogRef.current!.getBoundingClientRect();
+        if (
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right ||
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom
+        ) {
+          dialogRef.current!.close();
+        }
+      });
+    }
+  });
+
+  return (
+    <Dialog title={'Add user'} onClose={onClose} ref={dialogRef}>
+      <UserForm onClose={onClose!} />
+    </Dialog>
+  );
+}) as React.FC<IDialogProps>;
+
+export default UserDialog;