Add user form and fix bug

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

@@ -1,21 +1,38 @@
+import { useRef } from 'react';
+
 // Components
 import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button';
-import UserTable from './UserTable';
+import Button from '../../commons/styles/Button.ts';
+import UserTable from './Table';
 
 // Styled
 import { StyledUser, Title } from './styled';
+import UserDialog from './Dialog';
 
 const User = () => {
-  return (
-    <StyledUser>
-      <Direction type="horizontal">
-        <Title>List User</Title>
-        <Button>Add user</Button>
-      </Direction>
+  const dialogRef = useRef<HTMLDialogElement>();
 
-      <UserTable />
-    </StyledUser>
+  const openDialog = () => {
+    dialogRef.current?.showModal();
+  };
+
+  const closeDialog = () => {
+    dialogRef.current?.close();
+  };
+
+  return (
+    <>
+      <StyledUser>
+        <Direction type="horizontal">
+          <Title>List User</Title>
+          <Button onClick={openDialog}>Add user</Button>
+        </Direction>
+
+        <UserTable />
+      </StyledUser>
+
+      <UserDialog onClose={closeDialog} ref={dialogRef} />
+    </>
   );
 };