Fix comments

hotel-management/src/pages/Room/RomTable.tsx

@@ -2,25 +2,26 @@ import { useSearchParams } from 'react-router-dom';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 // Components
-import { StyledOperationTable } from './styled';
-import Menus from '../../components/Menus';
-import Table from '../../components/Table';
-import Direction from '../../commons/styles/Direction';
-import Message from '../../components/Message';
-import Search from '../../components/Search';
-import SortBy from '../../components/SortBy';
-import OrderBy from '../../components/OrderBy';
+import Menus from '@component/Menus';
+import Table from '@component/Table';
+import Message from '@component/Message';
+import Search from '@component/Search';
+import SortBy from '@component/SortBy';
+import OrderBy from '@component/OrderBy';
+import RoomRow from './RoomRow';
 
 // Types
-import { IRoom } from '../../types/rooms';
+import { IRoom } from '@type/rooms';
 
 // Constants
-import { useFetch } from '../../hooks/useFetch';
-import { ORDERBY_OPTIONS, ROOM_PAGE } from '../../constants/variables';
+import { useFetch } from '@hook/useFetch';
+import { ORDERBY_OPTIONS, ROOM_PAGE } from '@constant/commons';
 
 // Styled
-import Spinner from '../../commons/styles/Spinner';
-import RoomRow from './RoomRow';
+import { StyledOperationTable } from './styled';
+import Direction from '@commonStyle/Direction';
+import Spinner from '@commonStyle/Spinner';
+
 
 interface IRoomTable {
   reload: boolean;
@@ -28,6 +29,7 @@ interface IRoomTable {
 }
 
 const RoomTable = ({ reload, setReload }: IRoomTable) => {
+  const columnName = ['Id', 'Name', 'Price', 'Status'];
   const [nameSearch, setNameSearch] = useState('');
   const [searchParams] = useSearchParams();
   const [rooms, setRooms] = useState<IRoom[]>([]);
@@ -77,12 +79,7 @@ const RoomTable = ({ reload, setReload }: IRoomTable) => {
         {rooms.length ? (
           <Menus>
             <Table columns="10% 40% 20% 20% 5%">
-              <Table.Header>
-                <div>Id</div>
-                <div>Name</div>
-                <div>Price</div>
-                <div>Status</div>
-              </Table.Header>
+              <Table.Header headerColumn={columnName}/>
               <Table.Body<IRoom>
                 data={rooms}
                 render={(room: IRoom) => (

hotel-management/src/pages/Room/RoomForm.tsx

@@ -6,36 +6,35 @@ import styled from 'styled-components';
 import { useForm } from 'react-hook-form';
 
 // Styled
-import Button from '../../commons/styles/Button.ts';
-import Input from '../../commons/styles/Input.ts';
+import Button from '@commonStyle/Button.ts';
+import Input from '@commonStyle/Input.ts';
 
 // Types
-import { Nullable } from '../../types/common.ts';
-import { IRoom } from '../../types/rooms.ts';
+import { Nullable } from '@type/common.ts';
+import { IRoom } from '@type/rooms.ts';
 
 // Constants
-import {
-  ADD_SUCCESS,
-  EDIT_SUCCESS,
-} from '../../constants/messages.ts';
+import { ADD_SUCCESS, EDIT_SUCCESS } from '@constant/messages.ts';
 import {
   INVALID_DISCOUNT,
   INVALID_FIELD,
   REQUIRED_FIELD_ERROR,
-} from '../../constants/formValidateMessage.ts';
+} from '@constant/formValidateMessage.ts';
+import { INIT_VALUE_ROOM_FORM, REGEX } from '../../constants/commons.ts';
 
 // Helpers
 import {
   isValidDiscount,
-  isValidNumber,
+  isValidRegex,
   isValidString,
-} from '../../helpers/validators.ts';
+} from '@helper/validators.ts';
 
 // Components
-import FormRow from '../../components/LabelControl/index.tsx';
-import Form from '../../components/Form/index.tsx';
-import { addRoom, updateRoom } from '../../services/roomServices.ts';
-import { INIT_VALUE_ROOM_FORM } from '../../constants/variables.ts';
+import FormRow from '@component/LabelControl/index.tsx';
+import Form from '@component/Form/index.tsx';
+
+// Services
+import { addRoom, updateRoom } from '@service/roomServices.ts';
 
 const FormBtn = styled(Button)`
   width: 100%;
@@ -82,30 +81,25 @@ const RoomForm = ({
     // Calculate final price
     room.finalPrice = room.price - (room.price * room.discount) / 100;
 
-    try {
-      if (!roomEdit) {
-        // Add request
-        const response = await addRoom(room);
-        
-        if(response) {
-          toast.success(ADD_SUCCESS);
-        }
-      } else {
-        // Edit request
-        const response = await updateRoom(room);
+    if (!roomEdit) {
+      // Add request
+      const response = await addRoom(room);
 
-        if (response) {
-          toast.success(EDIT_SUCCESS);
-        }
+      if (response) {
+        toast.success(ADD_SUCCESS);
       }
-      // Reload table data
-      setReload!(!reload);
-    } catch (error: unknown) {
-      if (error instanceof Error) {
-        toast.error(error.message);
+    } else {
+      // Edit request
+      const response = await updateRoom(room);
+
+      if (response) {
+        toast.success(EDIT_SUCCESS);
       }
     }
 
+    // Reload table data
+    setReload!(!reload);
+
     reset();
     onCloseModal!();
   };
@@ -136,7 +130,7 @@ const RoomForm = ({
             required: REQUIRED_FIELD_ERROR,
             validate: {
               checkIdentifiedCode: (v) =>
-                isValidNumber(v.toString()) || INVALID_FIELD,
+                isValidRegex(REGEX.NUMBER, v.toString()) || INVALID_FIELD,
             },
             onChange: () => trigger('price'),
           })}
@@ -159,7 +153,11 @@ const RoomForm = ({
       </FormRow>
 
       <Form.Action>
-        <FormBtn type="submit" name="submit" disabled={!isDirty || !isValid || isSubmitting}>
+        <FormBtn
+          type="submit"
+          name="submit"
+          disabled={!isDirty || !isValid || isSubmitting}
+        >
           {
             !roomEdit 
               ? 'Add' 

hotel-management/src/pages/Room/RoomRow.tsx

@@ -2,22 +2,22 @@ import { Dispatch, SetStateAction } from 'react';
 import toast from 'react-hot-toast';
 
 // Constants
-import { ROOM_PATH } from '../../constants/path';
-import { STATUS_CODE } from '../../constants/responseStatus';
-import { CONFIRM_DELETE, DELETE_SUCCESS } from '../../constants/messages';
+import { ROOM_PATH } from '@constant/path';
+import { STATUS_CODE } from '@constant/responseStatus';
+import { CONFIRM_DELETE, DELETE_SUCCESS } from '@constant/messages';
 
 // Helpers
-import { sendRequest } from '../../helpers/sendRequest';
-import { formatCurrency } from '../../helpers/helper';
-import Modal from '../../components/Modal';
-import RoomForm from './RoomForm';
+import { sendRequest } from '@helper/sendRequest';
+import { formatCurrency } from '@helper/helper';
 
 // Types
-import { IRoom } from '../../types/rooms';
+import { IRoom } from '@type/rooms';
 
 // Components
-import Table from '../../components/Table';
-import Menus from '../../components/Menus';
+import RoomForm from './RoomForm';
+import Modal from '@component/Modal';
+import Table from '@component/Table';
+import Menus from '@component/Menus';
 import { RiEditBoxFill } from 'react-icons/ri';
 import { HiTrash } from 'react-icons/hi';
 
@@ -43,7 +43,9 @@ const RoomRow = ({ room, reload, setReload }: IRoomRow) => {
 
   const { id, name, finalPrice, status } = room;
 
-  const statusText = status ? 'Unavailable' : 'Available';
+  const statusText = status 
+    ? 'Unavailable' 
+    : 'Available';
 
   return (
     <Table.Row>
@@ -58,9 +60,14 @@ const RoomRow = ({ room, reload, setReload }: IRoomRow) => {
             <Menus.Toggle id={id.toString()} />
 
             <Menus.List id={id.toString()}>
-              <Modal.Open modalName="edit">
-                <Menus.Button icon={<RiEditBoxFill />}>Edit</Menus.Button>
-              </Modal.Open>
+              <Modal.Open
+                modalName="edit"
+                renderChildren={(onCloseModal) => (
+                  <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
+                    Edit
+                  </Menus.Button>
+                )}
+              />
 
               <Menus.Button
                 icon={<HiTrash />}

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

@@ -2,15 +2,15 @@ import { useState } from 'react';
 
 // Components
 import RoomTable from './RomTable';
+import RoomForm from './RoomForm';
 
 // Styled
 import { StyledRoom, Title } from './styled';
-import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button';
+import Direction from '@commonStyle/Direction.ts';
+import Button from '@commonStyle/Button';
 
 // Types
-import Modal from '../../components/Modal';
-import RoomForm from './RoomForm';
+import Modal from '@component/Modal';
 
 const Room = () => {
   const [reload, setReload] = useState(true);
@@ -22,19 +22,19 @@ const Room = () => {
           <Title>List Room</Title>
 
           <Modal>
-            <Modal.Open modalName="room-form">
-              <Button>Add room</Button>
-            </Modal.Open>
+            <Modal.Open
+              modalName="room-form"
+              renderChildren={(onCloseModal) => (
+                <Button onClick={onCloseModal}>Add room</Button>
+              )}
+            />
             <Modal.Window name="room-form" title="Add form">
               <RoomForm setReload={setReload} reload={reload} />
             </Modal.Window>
           </Modal>
         </Direction>
 
-        <RoomTable
-          reload={reload}
-          setReload={setReload}
-        />
+        <RoomTable reload={reload} setReload={setReload} />
       </StyledRoom>
     </>
   );

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

@@ -11,41 +11,38 @@ import toast from 'react-hot-toast';
 import { FormProvider, useForm } from 'react-hook-form';
 
 // Styled
-import Input from '../../commons/styles/Input.ts';
+import Input from '@commonStyle/Input.ts';
 
 // Components
-import Form from '../../components/Form/index.tsx';
-import FormRow from '../../components/LabelControl/index.tsx';
-import Select, { ISelectOptions } from '../../components/Select/index.tsx';
+import Form from '@component/Form/index.tsx';
+import FormRow from '@component/LabelControl/index.tsx';
+import Select, { ISelectOptions } from '@component/Select/index.tsx';
 
 // Helpers
 import {
-  isEmptyObj,
-  isValidName,
-  isValidNumber,
-  isValidPhoneNumber,
-} from '../../helpers/validators.ts';
+  isEmptyObj, isValidRegex,
+} from '@helper/validators.ts';
 
 // Constants
-import { ADD_SUCCESS, EDIT_SUCCESS } from '../../constants/messages.ts';
+import { ADD_SUCCESS, EDIT_SUCCESS } from '@constant/messages.ts';
 import {
   INVALID_FIELD,
   INVALID_PHONE,
   REQUIRED_FIELD_ERROR,
-} from '../../constants/formValidateMessage.ts';
-import { INIT_VALUE_USER_FORM } from '../../constants/variables.ts';
+} from '@constant/formValidateMessage.ts';
+import { INIT_VALUE_USER_FORM, REGEX } from '@constant/commons.ts';
 
 // Styled
 import { FormBtn } from './styled.ts';
 
 // Services
-import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
+import { getAllRoom, updateRoomStatus } from '@service/roomServices.ts';
+import { createUser, updateUser } from '@service/userServices.ts';
 
 // Types
-import { Nullable } from '../../types/common.ts';
-import { IUser } from '../../types/users.ts';
-import { IRoom } from '../../types/rooms.ts';
-import { createUser, updateUser } from '../../services/userServices.ts';
+import { Nullable } from '@type/common.ts';
+import { IUser } from '@type/users.ts';
+import { IRoom } from '@type/rooms.ts';
 
 interface IUserFormProp {
   onCloseModal?: () => void;
@@ -109,35 +106,29 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
   // Submit form
   const onSubmit = useCallback(
     async (newUser: IUser) => {
-      try {
-        if (!user) {
-          // Add request
-          const response = await createUser(newUser);
+      if (!user) {
+        // Add request
+        const response = await createUser(newUser);
 
-          if (response) {
-            toast.success(ADD_SUCCESS);
-          }
-
-          // Update room status
-          updateRoomStatus(newUser.roomId, true);
-        } else {
-          // Edit request
-          const response = await updateUser(newUser);
-
-          if (response) {
-            toast.success(EDIT_SUCCESS);
-          }
-
-          // Update room status
-          updateRoomStatus(user!.roomId, true, newUser.roomId);
+        if (response) {
+          toast.success(ADD_SUCCESS);
         }
-        // Reload table data
-        setReload(!reload);
-      } catch (error: unknown) {
-        if (error instanceof Error) {
-          toast.error(error.message);
+
+        // Update room status
+        updateRoomStatus(newUser.roomId, true);
+      } else {
+        // Edit request
+        const response = await updateUser(newUser);
+
+        if (response) {
+          toast.success(EDIT_SUCCESS);
         }
+
+        // Update room status
+        updateRoomStatus(user!.roomId, true, newUser.roomId);
       }
+      // Reload table data
+      setReload(!reload);
 
       reset();
       onCloseModal!();
@@ -169,7 +160,7 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
             {...register('name', {
               required: REQUIRED_FIELD_ERROR,
               validate: {
-                checkValidName: (value) => isValidName(value) || INVALID_FIELD,
+                checkValidName: (value) => isValidRegex(REGEX.NAME, value) || INVALID_FIELD,
               },
               onChange: () => trigger('name'),
             })}
@@ -187,7 +178,7 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
               required: REQUIRED_FIELD_ERROR,
               validate: {
                 checkIdentifiedCode: (v) =>
-                  isValidNumber(v.toString()) || INVALID_FIELD,
+                  isValidRegex(REGEX.NUMBER, v.toString()) || INVALID_FIELD,
               },
               onChange: () => trigger('identifiedCode'),
             })}
@@ -201,7 +192,7 @@ const UserForm = ({ onCloseModal, reload, setReload, user }: IUserFormProp) => {
             {...register('phone', {
               required: REQUIRED_FIELD_ERROR,
               validate: {
-                checkPhoneNum: (v) => isValidPhoneNumber(v) || INVALID_PHONE,
+                checkPhoneNum: (v) => isValidRegex(REGEX.PHONE, v) || INVALID_PHONE,
               },
               onChange: () => trigger('phone'),
             })}

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

@@ -2,31 +2,27 @@ import { useSearchParams } from 'react-router-dom';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 // Components
-import Menus from '../../components/Menus';
-import Table from '../../components/Table';
-import Direction from '../../commons/styles/Direction';
-import Message from '../../components/Message';
-import Search from '../../components/Search';
-import SortBy from '../../components/SortBy';
-import OrderBy from '../../components/OrderBy';
-
-// Types
-import { IUser } from '../../types/users';
-
-// Hooks
-import { useFetch } from '../../hooks/useFetch';
-
-// Constants
-import { ORDERBY_OPTIONS, USER_PAGE } from '../../constants/variables';
-
-// Styled
-import { StyledOperationTable } from './styled';
-import Spinner from '../../commons/styles/Spinner';
+import Menus from '@component/Menus';
+import Table from '@component/Table';
+import Message from '@component/Message';
+import Search from '@component/Search';
+import SortBy from '@component/SortBy';
+import OrderBy from '@component/OrderBy';
 import UserRow from './UserRow';
 
+// Types
+import { IUser } from '@type/users';
 
+// Hooks
+import { useFetch } from '@hook/useFetch';
 
+// Constants
+import { ORDERBY_OPTIONS, USER_PAGE } from '@constant/commons';
 
+// Styled
+import Direction from '@commonStyle/Direction';
+import { StyledOperationTable } from './styled';
+import Spinner from '@commonStyle/Spinner';
 
 interface IUserTable {
   reload: boolean;
@@ -34,6 +30,7 @@ interface IUserTable {
 }
 
 const UserTable = ({ reload, setReload }: IUserTable) => {
+  const columnName = ['Id', 'Name', 'Identified Code', 'Phone', 'Room Id'];
   const [users, setUsers] = useState<IUser[]>([]);
   const [phoneSearch, setPhoneSearch] = useState('');
   const [searchParams] = useSearchParams();
@@ -83,13 +80,7 @@ const UserTable = ({ reload, setReload }: IUserTable) => {
         {users.length ? (
           <Menus>
             <Table columns="10% 30% 20% 20% 10% 5%">
-              <Table.Header>
-                <div>Id</div>
-                <div>Name</div>
-                <div>Identified Code</div>
-                <div>Phone</div>
-                <div>Room Id</div>
-              </Table.Header>
+              <Table.Header headerColumn={columnName} />
               <Table.Body<IUser>
                 data={users}
                 render={(user: IUser) => (

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

@@ -4,21 +4,21 @@ import { Dispatch, SetStateAction } from 'react';
 // Components
 import { RiEditBoxFill } from 'react-icons/ri';
 import { IoExit } from 'react-icons/io5';
-import Modal from '../../components/Modal';
+import Modal from '@component/Modal';
+import Table from '@component/Table';
+import Menus from '@component/Menus';
 import UserForm from './FormUser';
-import Table from '../../components/Table';
-import Menus from '../../components/Menus';
 
 // Constants
-import { STATUS_CODE } from '../../constants/responseStatus';
-import { CONFIRM_MESSAGE, DENIED_ACTION } from '../../constants/messages';
+import { STATUS_CODE } from '@constant/responseStatus';
+import { CONFIRM_MESSAGE, DENIED_ACTION } from '@constant/messages';
 
 // Services
-import { updateRoomStatus } from '../../services/roomServices';
-import { checkOutUser } from '../../services/userServices';
+import { updateRoomStatus } from '@service/roomServices';
+import { checkOutUser } from '@service/userServices';
 
 // Types
-import { IUser } from '../../types/users';
+import { IUser } from '@type/users';
 
 interface IUserRow {
   user: IUser;
@@ -56,17 +56,27 @@ const UserRow = ({ user, reload, setReload }: IUserRow) => {
       <div>{name}</div>
       <div>{identifiedCode}</div>
       <div>{phone}</div>
-      <div>{roomId ? roomId : 'None'}</div>
-
+      <div>
+        {
+          roomId 
+            ? roomId 
+            : 'None'
+        }
+      </div>
       <div>
         <Modal>
           <Menus.Menu>
             <Menus.Toggle id={id.toString()} />
 
             <Menus.List id={id.toString()}>
-              <Modal.Open modalName="edit">
-                <Menus.Button icon={<RiEditBoxFill />}>Edit</Menus.Button>
-              </Modal.Open>
+              <Modal.Open
+                modalName="edit"
+                renderChildren={(onCloseModal) => (
+                  <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
+                    Edit
+                  </Menus.Button>
+                )}
+              />
               <Menus.Button
                 icon={<IoExit />}
                 onClick={() => handleCheckOut(user)}

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

@@ -4,15 +4,19 @@ import { useState } from 'react';
 import UserTable from './TableUser';
 
 // Styled
-import Button from '../../commons/styles/Button';
-import Direction from '../../commons/styles/Direction';
+import Button from '@commonStyle/Button';
+import Direction from '@commonStyle/Direction.ts';
 import { StyledUser, Title } from './styled';
 
 // Types
-import Modal from '../../components/Modal';
+import Modal from '@component/Modal';
 import UserForm from './FormUser';
 
+// Constants
+import { FORM } from '@constant/commons';
+
 const User = () => {
+  const ADD_ROOM = 'Add room';
   const [reload, setReload] = useState(true);
 
   return (
@@ -22,10 +26,13 @@ const User = () => {
           <Title>List User</Title>
 
           <Modal>
-            <Modal.Open modalName="user-form">
-              <Button>Add user</Button>
-            </Modal.Open>
-            <Modal.Window name="user-form" title="Add form">
+            <Modal.Open
+              modalName={FORM.USER}
+              renderChildren={(onCloseModal) => (
+                <Button onClick={onCloseModal}>Add user</Button>
+              )}
+            />
+            <Modal.Window name={FORM.USER} title={ADD_ROOM}>
               <UserForm setReload={setReload} reload={reload} />
             </Modal.Window>
           </Modal>