Fix bug and optimzed code

hotel-management/src/commons/styles/Button.ts

@@ -1,7 +1,9 @@
 import styled, { css } from 'styled-components';
 
+type TButtonStyle = 'primary' | 'secondary';
+
 interface IButtonStyle {
-  styled?: 'primary' | 'secondary';
+  styled?: TButtonStyle;
 }
 
 const Button = styled.button<IButtonStyle>`
@@ -11,7 +13,7 @@ const Button = styled.button<IButtonStyle>`
   font-weight: 600;
 
   cursor: pointer;
-  
+
   border-radius: var(--radius-md);
 
   ${(props) =>

hotel-management/src/commons/styles/ButtonIcon.ts

@@ -5,7 +5,7 @@ const ButtonIcon = styled.button`
 
   padding: 8px;
   transition: all 0.2s;
-  
+
   border: none;
   border-radius: var(--radius-md);
 

hotel-management/src/commons/styles/CommonInput.ts

@@ -5,9 +5,9 @@ const CommonInput = css`
   border-radius: var(--radius-sm);
 
   padding: 10px 20px;
-  
+
   font-size: var(--fs-sm-x);
-  
+
   width: 200px;
 `;
 

hotel-management/src/commons/styles/Direction.ts

@@ -1,7 +1,9 @@
 import styled, { css } from 'styled-components';
 
+type TDirection = 'vertical' | 'horizontal';
+
 interface IDirection {
-  type?: 'vertical' | 'horizontal';
+  type?: TDirection;
 }
 
 const Direction = styled.div<IDirection>`

hotel-management/src/commons/styles/Input.ts

@@ -3,8 +3,10 @@ import styled, { css } from 'styled-components';
 // Styled
 import CommonInput from './CommonInput';
 
+type TInput = 'text' | 'checkbox' | 'hidden';
+
 interface IInputTyped {
-  type?: 'text' | 'checkbox' | 'hidden';
+  type?: TInput;
 }
 
 const Input = styled.input<IInputTyped>`

hotel-management/src/components/Dialog/index.tsx

@@ -16,7 +16,7 @@ export interface IDialogProps {
 const Dialog = forwardRef<HTMLDialogElement, IDialogProps>(
   (props: IDialogProps, ref) => {
     const { title, children, onClose } = props;
-    
+
     return (
       <StyledDialog ref={ref} onClose={onClose}>
         <StyledTitle>{title}</StyledTitle>

hotel-management/src/components/Search/index.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 // Styled
 import { StyledSearch } from './styled';
@@ -11,7 +11,7 @@ interface ISearch {
   setValueSearch: (phone: string) => void;
 }
 
-const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
+const Search = ({ setValueSearch, setPlaceHolder }: ISearch) => {
   const [query, setQuery] = useState('');
   const debounceValue = useDebounce<string>(query, 700);
 
@@ -25,6 +25,6 @@ const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
       placeholder={setPlaceHolder}
     />
   );
-});
+};
 
 export default Search;

hotel-management/src/components/Select/index.tsx

@@ -68,7 +68,7 @@ const Select = ({
   optionsConfigForm,
   value,
   onChange,
-  ariaLabel
+  ariaLabel,
 }: ISelect) => {
   const { register } = useFormContext() ?? {};
 

hotel-management/src/components/Sidebar/styled.ts

@@ -12,7 +12,7 @@ const Heading = styled.h1`
   font-size: var(--fs-md);
   text-transform: uppercase;
   text-align: center;
-  
+
   color: var(--primary-color);
 `;
 

hotel-management/src/components/SortBy/index.tsx

@@ -20,11 +20,11 @@ const SortBy = memo(({ options }: ISortByProps) => {
   };
 
   return (
-    <Select 
+    <Select
-      options={options} 
+      options={options}
-      value={sortBy} 
+      value={sortBy}
-      onChange={handleChange} 
+      onChange={handleChange}
-      ariaLabel='Sort'
+      ariaLabel="Sort"
     />
   );
 });

hotel-management/src/components/Table/index.tsx

@@ -42,7 +42,7 @@ const Body = <T,>({ data, render }: ITableBody<T>) => {
 
 const Row = ({ children }: ITable) => {
   const { columns } = useContext(TableContext);
-  
+
   return <StyledRow columns={columns}>{children}</StyledRow>;
 };
 

hotel-management/src/constants/messages.ts

@@ -1,20 +1,17 @@
-const errorMsg = (errorCode: number, msg: string) => {
-  return `Error code: ${errorCode}. Message: ${msg}`;
-};
-
 const ADD_SUCCESS = 'Add success';
 const EDIT_SUCCESS = 'Edit success';
 const CONFIRM_MESSAGE = 'Do you want to checkout this user?';
 const CONFIRM_DELETE = 'Are you sure to delete it?'
 const DELETE_SUCCESS = 'Delete success';
 const CHECKOUT_SUCCESS = 'Check out success';
+const DENIED_ACTION = "Can't checkout user not in room!";
 
 export {
   ADD_SUCCESS,
-  errorMsg,
   EDIT_SUCCESS,
   CONFIRM_MESSAGE,
   CONFIRM_DELETE,
   DELETE_SUCCESS,
   CHECKOUT_SUCCESS,
+  DENIED_ACTION
 };

hotel-management/src/constants/responseStatus.ts

@@ -2,7 +2,6 @@ const STATUS_CODE = {
   OK: 200,
   CREATE: 201,
   NOT_FOUND: 404,
-  INTERNAL_SERVER_ERROR: 500,
 };
 
 const RESPONSE_MESSAGE = {

hotel-management/src/constants/variables.ts

@@ -61,6 +61,13 @@ const INIT_VALUE_USER_FORM = {
   phone: '',
 };
 
+const INIT_VALUE_ROOM_FORM = {
+  name: '',
+  id: 0,
+  price: 0,
+  discount: 0,
+};
+
 export {
   USER_PAGE,
   ROOM_PAGE,
@@ -68,4 +75,5 @@ export {
   ERROR,
   ORDERBY_OPTIONS,
   INIT_VALUE_USER_FORM,
+  INIT_VALUE_ROOM_FORM,
 };

hotel-management/src/helpers/helper.ts

@@ -1,17 +1,6 @@
 // Constants
 import { REQUIRED_FIELD_ERROR } from '../constants/formValidateMessage';
 
-/**
- * Set required error for value
- * @param value The value set required or not
- * @param isRequired Set required for value
- * @returns Return error text if value has required
- */
-const isRequired = (value: string | number, isRequired: unknown) => {
-  if (!value && isRequired) return REQUIRED_FIELD_ERROR;
-  return '';
-};
-
 /**
  * Create query url for search
  * @param columnSearch Column want to search
@@ -53,6 +42,11 @@ const searchQuery = (
   return query;
 };
 
+/**
+ * Convert value to currency format with value
+ * @param value Value need to be converted
+ * @returns Return the string value with currency
+ */
 const formatCurrency = (value: number): string => {
   return Intl.NumberFormat('en-US', {
     style: 'currency',
@@ -60,4 +54,14 @@ const formatCurrency = (value: number): string => {
   }).format(value);
 };
 
-export { isRequired, searchQuery, formatCurrency, REQUIRED_FIELD_ERROR };
+/**
+ * Create error string
+ * @param errorCode Error code
+ * @param msg Message error
+ * @returns Return the full error string
+ */
+const errorMsg = (errorCode: number, msg: string) => {
+  return `Error code: ${errorCode}. Message: ${msg}`;
+};
+
+export { errorMsg, searchQuery, formatCurrency, REQUIRED_FIELD_ERROR };

hotel-management/src/helpers/sendRequest.ts

@@ -2,7 +2,7 @@
 import { BASE_URL } from '../constants/path';
 
 // Types
-import { TResponse } from '../types/response';
+import { IResponse } from '../types/responses';
 
 type TMethodRequest = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
 
@@ -17,7 +17,7 @@ export const sendRequest = async <T>(
   path: string,
   method: TMethodRequest = 'GET',
   body?: BodyInit
-): Promise<TResponse<T>> => {
+): Promise<IResponse<T>> => {
   const response = await fetch(BASE_URL + path, {
     method,
     body,

hotel-management/src/hooks/useFetch.ts

@@ -5,7 +5,7 @@ import { BASE_URL } from '../constants/path';
 import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 
 // Helpers
-import { searchQuery } from '../helpers/utils';
+import { searchQuery } from '../helpers/helper';
 
 // Types
 import { Nullable } from '../types/common';
@@ -40,11 +40,11 @@ const useFetch = (
       setIsPending(true);
 
       // Set default value
-      const sortBy = tempSortBy
+      const sortBy = tempSortBy 
-        ? tempSortBy
+        ? tempSortBy 
         : DEFAULT_SORT_BY;
-      const orderBy = tempOrderBy
+      const orderBy = tempOrderBy 
-        ? tempOrderBy
+        ? tempOrderBy 
         : DEFAULT_ORDER_BY;
 
       // Query search

hotel-management/src/hooks/useOutsideClick.ts

@@ -11,7 +11,7 @@ import { Nullable } from '../types/common';
  */
 export const useOutsideClick = (
   handler: () => void,
-  listeningCapturing = true,
+  listeningCapturing = true
 ): MutableRefObject<Nullable<HTMLUListElement>> => {
   const ref = useRef<HTMLUListElement>(null);
 

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

@@ -12,7 +12,7 @@ import RoomForm from './Form';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TRoom } from '../../types/rooms';
+import { IRoom } from '../../types/rooms';
 
 // Hooks
 import { useForwardRef } from '../../hooks/useForwardRef';
@@ -22,7 +22,7 @@ interface IRoomDialog {
   reload?: boolean;
   setReload?: Dispatch<SetStateAction<boolean>>;
   ref?: MutableRefObject<Nullable<HTMLDialogElement>>;
-  room?: Nullable<TRoom>;
+  room?: Nullable<IRoom>;
   isAdd?: boolean;
 }
 

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

@@ -11,15 +11,12 @@ import Input from '../../commons/styles/Input.ts';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TRoom } from '../../types/rooms.ts';
+import { IRoom } from '../../types/rooms';
 
 // Constants
-import { ROOM_PATH } from '../../constants/path.ts';
-import { STATUS_CODE } from '../../constants/responseStatus.ts';
 import {
   ADD_SUCCESS,
   EDIT_SUCCESS,
-  errorMsg,
 } from '../../constants/messages.ts';
 import {
   INVALID_DISCOUNT,
@@ -28,7 +25,6 @@ import {
 } from '../../constants/formValidateMessage.ts';
 
 // Helpers
-import { sendRequest } from '../../helpers/sendRequest.ts';
 import {
   isValidDiscount,
   isValidNumber,
@@ -38,6 +34,8 @@ import {
 // 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';
 
 const FormBtn = styled(Button)`
   width: 100%;
@@ -53,7 +51,7 @@ interface IRoomFormProp {
   onClose: () => void;
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
-  room?: Nullable<TRoom>;
+  room?: Nullable<IRoom>;
   isAdd: boolean;
 }
 
@@ -64,7 +62,7 @@ const RoomForm = ({
   room,
   isAdd,
 }: IRoomFormProp) => {
-  const formMethods = useForm<TRoom>();
+  const formMethods = useForm<IRoom>();
   const {
     register,
     handleSubmit,
@@ -74,43 +72,32 @@ const RoomForm = ({
   } = formMethods;
 
   useEffect(() => {
-    if (room) {
+    if (room && !isAdd) {
       reset(room);
+    } else {
+      reset(INIT_VALUE_ROOM_FORM);
     }
-  }, [room, reset]);
+  }, [room, reset, isAdd]);
 
   // Submit form
-  const onSubmit = async (room: TRoom) => {
+  const onSubmit = async (room: IRoom) => {
     // Calculate final price
     room.finalPrice = room.price - (room.price * room.discount) / 100;
 
     try {
       if (isAdd) {
         // Add request
-
+        const response = await addRoom(room);
-        const response = await sendRequest(
+        
-          ROOM_PATH,
+        if(response) {
-          'POST',
-          JSON.stringify(room)
-        );
-
-        if (response.statusCode === STATUS_CODE.CREATE) {
           toast.success(ADD_SUCCESS);
-        } else {
-          throw new Error(errorMsg(response.statusCode, response.msg));
         }
       } else {
         // Edit request
-        const response = await sendRequest(
+        const response = await updateRoom(room);
-          ROOM_PATH + `/${room!.id}`,
-          'PUT',
-          JSON.stringify(room)
-        );
 
-        if (response.statusCode == STATUS_CODE.OK) {
+        if (response) {
           toast.success(EDIT_SUCCESS);
-        } else {
-          throw new Error(errorMsg(response.statusCode, response.msg));
         }
       }
       // Reload table data

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

@@ -16,7 +16,7 @@ import OrderBy from '../../components/OrderBy';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TRoom } from '../../types/rooms';
+import { IRoom } from '../../types/rooms';
 
 // Constants
 import { useFetch } from '../../hooks/useFetch';
@@ -30,12 +30,12 @@ import Spinner from '../../commons/styles/Spinner';
 
 // Helpers
 import { sendRequest } from '../../helpers/sendRequest';
-import { formatCurrency } from '../../helpers/utils';
+import { formatCurrency } from '../../helpers/helper';
 
 interface IRoomRow {
-  room: TRoom;
+  room: IRoom;
   openFormDialog: () => void;
-  setRoom: Dispatch<SetStateAction<Nullable<TRoom>>>;
+  setRoom: Dispatch<SetStateAction<Nullable<IRoom>>>;
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
 }
@@ -47,12 +47,12 @@ const RoomRow = ({
   reload,
   setReload,
 }: IRoomRow) => {
-  const handleEdit = (room: TRoom) => {
+  const handleEdit = (room: IRoom) => {
     setRoom(room);
     openFormDialog();
   };
 
-  const handleDelete = async (room: TRoom) => {
+  const handleDelete = async (room: IRoom) => {
     if (confirm(CONFIRM_DELETE)) {
       const response = await sendRequest(ROOM_PATH + `/${room.id}`, 'DELETE');
 
@@ -101,7 +101,7 @@ interface IRoomTable {
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
   openFormDialog: () => void;
-  setRoom?: Dispatch<SetStateAction<Nullable<TRoom>>>;
+  setRoom?: Dispatch<SetStateAction<Nullable<IRoom>>>;
 }
 
 const RoomTable = ({
@@ -112,7 +112,7 @@ const RoomTable = ({
 }: IRoomTable) => {
   const [nameSearch, setNameSearch] = useState('');
   const [searchParams] = useSearchParams();
-  const [rooms, setRooms] = useState<TRoom[]>([]);
+  const [rooms, setRooms] = useState<IRoom[]>([]);
   const sortByValue = searchParams.get('sortBy')
     ? searchParams.get('sortBy')!
     : '';
@@ -165,9 +165,9 @@ const RoomTable = ({
                 <div>Price</div>
                 <div>Status</div>
               </Table.Header>
-              <Table.Body<TRoom>
+              <Table.Body<IRoom>
                 data={rooms}
-                render={(room: TRoom) => (
+                render={(room: IRoom) => (
                   <RoomRow
                     room={room}
                     key={room.id}

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

@@ -11,12 +11,12 @@ import RoomDialog from './Dialog';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TRoom } from '../../types/rooms';
+import { IRoom } from '../../types/rooms';
 
 const Room = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const [reload, setReload] = useState(true);
-  const [room, setRoom] = useState<Nullable<TRoom>>(null);
+  const [room, setRoom] = useState<Nullable<IRoom>>(null);
   const [isAdd, setIsAdd] = useState(false);
 
   const openFormDialog = (isAddForm: boolean = false) => {

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

@@ -12,7 +12,7 @@ import UserForm from './Form';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TUser } from '../../types/user';
+import { IUser } from '../../types/users';
 
 // Hooks
 import { useForwardRef } from '../../hooks/useForwardRef';
@@ -22,7 +22,7 @@ interface IUserDialog {
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
   ref: MutableRefObject<Nullable<HTMLDialogElement>>;
-  user: Nullable<TUser>;
+  user: Nullable<IUser>;
   isAdd: boolean;
 }
 

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

@@ -19,7 +19,6 @@ import FormRow from '../../components/LabelControl/index.tsx';
 import Select, { ISelectOptions } from '../../components/Select';
 
 // Helpers
-import { sendRequest } from '../../helpers/sendRequest.ts';
 import {
   isEmptyObj,
   isValidName,
@@ -28,13 +27,7 @@ import {
 } from '../../helpers/validators.ts';
 
 // Constants
-import { STATUS_CODE } from '../../constants/responseStatus.ts';
+import { ADD_SUCCESS, EDIT_SUCCESS } from '../../constants/messages.ts';
-import {
-  ADD_SUCCESS,
-  EDIT_SUCCESS,
-  errorMsg,
-} from '../../constants/messages.ts';
-import { USER_PATH } from '../../constants/path.ts';
 import {
   INVALID_FIELD,
   INVALID_PHONE,
@@ -49,15 +42,16 @@ import { FormBtn } from './styled.ts';
 import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
 
 // Types
-import { Nullable } from '../../types/common';
+import { Nullable } from '../../types/common.ts';
-import { TUser } from '../../types/user.ts';
+import { IUser } from '../../types/users.ts';
-import { TRoom } from '../../types/rooms.ts';
+import { IRoom } from '../../types/rooms.ts';
+import { createUser, updateUser } from '../../services/userServices.ts';
 
 interface IUserFormProp {
   onClose: () => void;
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
-  user: Nullable<TUser>;
+  user: Nullable<IUser>;
   isAdd: boolean;
 }
 
@@ -68,7 +62,7 @@ const UserForm = ({
   user,
   isAdd,
 }: IUserFormProp) => {
-  const formMethods = useForm<TUser>();
+  const formMethods = useForm<IUser>();
   const {
     register,
     handleSubmit,
@@ -76,17 +70,25 @@ const UserForm = ({
     formState: { errors, isDirty, isValid },
     trigger,
   } = formMethods;
-  const [rooms, setRooms] = useState<TRoom[]>([]);
+  const [rooms, setRooms] = useState<IRoom[]>([]);
   const [options, setOptions] = useState<ISelectOptions[]>();
 
   // Init value when edit form and load options
   useEffect(() => {
     const load = async () => {
       const options: ISelectOptions[] = [];
-      const tempUser = isAdd ? {} : { ...user };
+      const tempUser = isAdd 
+        ? {} 
+        : { ...user };
 
       // Load and set default options room
       if (rooms.length > 0) {
+        // Init first options
+        options.push({
+          label: '---Select---',
+          value: '0',
+        });
+
         rooms.forEach((item) => {
           if (!item.status || tempUser?.roomId === item.id)
             options.push({
@@ -98,16 +100,10 @@ const UserForm = ({
 
       if (options.length > 0) {
         setOptions(options);
-        reset({ roomId: +options[0].value });
       }
 
       if (!isEmptyObj(tempUser)) {
         // Init value
-        // Set default value when user not have room yet.
-        if (!tempUser.roomId) {
-          tempUser.roomId = +options[0].value;
-        }
-
         reset(tempUser);
       } else {
         reset(INIT_VALUE_USER_FORM);
@@ -119,36 +115,24 @@ const UserForm = ({
 
   // Submit form
   const onSubmit = useCallback(
-    async (newUser: TUser) => {
+    async (newUser: IUser) => {
       try {
         if (isAdd) {
           // Add request
-          const response = await sendRequest(
+          const response = await createUser(newUser);
-            USER_PATH,
-            'POST',
-            JSON.stringify(newUser)
-          );
 
-          if (response.statusCode === STATUS_CODE.CREATE) {
+          if (response) {
             toast.success(ADD_SUCCESS);
-          } else {
-            throw new Error(errorMsg(response.statusCode, response.msg));
           }
 
           // Update room status
           updateRoomStatus(newUser.roomId, true);
         } else {
           // Edit request
-          const response = await sendRequest(
+          const response = await updateUser(newUser);
-            USER_PATH + `/${newUser.id}`,
-            'PUT',
-            JSON.stringify(newUser)
-          );
 
-          if (response.statusCode == STATUS_CODE.OK) {
+          if (response) {
             toast.success(EDIT_SUCCESS);
-          } else {
-            throw new Error(errorMsg(response.statusCode, response.msg));
           }
 
           // Update room status
@@ -232,7 +216,7 @@ const UserForm = ({
         </FormRow>
 
         <FormRow label="Room">
-          {options && options.length > 0 ? (
+          {options && options.length > 1 ? (
             <Select
               id="roomId"
               options={options!}
@@ -240,6 +224,7 @@ const UserForm = ({
               optionsConfigForm={{
                 valueAsNumber: true,
                 onChange: () => trigger('roomId'),
+                validate: (v) => v !== 0,
               }}
             />
           ) : (
@@ -249,7 +234,11 @@ const UserForm = ({
 
         <Form.Action>
           <FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
-            {isAdd ? 'Add' : 'Save'}
+            {
+              isAdd 
+                ? 'Add' 
+                : 'Save'
+            }
           </FormBtn>
           <FormBtn type="button" styled="secondary" onClick={onClose}>
             Close

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

@@ -15,7 +15,7 @@ import OrderBy from '../../components/OrderBy';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TUser } from '../../types/user';
+import { IUser } from '../../types/users';
 
 // Hooks
 import { useFetch } from '../../hooks/useFetch';
@@ -23,7 +23,7 @@ import { useFetch } from '../../hooks/useFetch';
 // Constants
 import { STATUS_CODE } from '../../constants/responseStatus';
 import { ORDERBY_OPTIONS, USER_PAGE } from '../../constants/variables';
-import { CONFIRM_MESSAGE } from '../../constants/messages';
+import { CONFIRM_MESSAGE, DENIED_ACTION } from '../../constants/messages';
 
 // Styled
 import { StyledOperationTable } from './styled';
@@ -34,9 +34,9 @@ import { updateRoomStatus } from '../../services/roomServices';
 import { checkOutUser } from '../../services/userServices';
 
 interface IUserRow {
-  user: TUser;
+  user: IUser;
   openFormDialog: () => void;
-  setUser: Dispatch<SetStateAction<Nullable<TUser>>>;
+  setUser: Dispatch<SetStateAction<Nullable<IUser>>>;
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
 }
@@ -48,26 +48,31 @@ const UserRow = ({
   reload,
   setReload,
 }: IUserRow) => {
-  const handleEdit = (user: TUser) => {
+  const handleEdit = (user: IUser) => {
     setUser(user);
     openFormDialog();
   };
 
-  const handleCheckOut = async (user: TUser) => {
+  const handleCheckOut = async (user: IUser) => {
-    if (confirm(CONFIRM_MESSAGE)) {
+    if(user.roomId !== 0) {
-      const resUpdateStatus = await updateRoomStatus(user.roomId, false);
+      if (confirm(CONFIRM_MESSAGE)) {
-      const resCheckoutUser = await checkOutUser(user);
+        const resUpdateStatus = await updateRoomStatus(user.roomId, false);
-
+        const resCheckoutUser = await checkOutUser(user);
-      if (
+  
-        resCheckoutUser?.statusCode === STATUS_CODE.OK &&
+        if (
-        resUpdateStatus?.statusCode === STATUS_CODE.OK
+          resCheckoutUser?.statusCode === STATUS_CODE.OK &&
-      ) {
+          resUpdateStatus?.statusCode === STATUS_CODE.OK
-        toast.success('Check out complete!');
+        ) {
-
+          toast.success('Check out complete!');
-        // Reload table
+  
-        setReload(!reload);
+          // Reload table
+          setReload(!reload);
+        }
       }
+    } else {
+      toast.error(DENIED_ACTION);
     }
+    
   };
 
   const { id, name, identifiedCode, phone, roomId } = user;
@@ -107,7 +112,7 @@ interface IUserTable {
   reload: boolean;
   setReload: Dispatch<SetStateAction<boolean>>;
   openFormDialog: () => void;
-  setUser?: Dispatch<SetStateAction<Nullable<TUser>>>;
+  setUser?: Dispatch<SetStateAction<Nullable<IUser>>>;
 }
 
 const UserTable = ({
@@ -116,7 +121,7 @@ const UserTable = ({
   openFormDialog,
   setUser,
 }: IUserTable) => {
-  const [users, setUsers] = useState<TUser[]>([]);
+  const [users, setUsers] = useState<IUser[]>([]);
   const [phoneSearch, setPhoneSearch] = useState('');
   const [searchParams] = useSearchParams();
   const sortByValue = searchParams.get('sortBy')
@@ -172,9 +177,9 @@ const UserTable = ({
                 <div>Phone</div>
                 <div>Room Id</div>
               </Table.Header>
-              <Table.Body<TUser>
+              <Table.Body<IUser>
                 data={users}
-                render={(user: TUser) => (
+                render={(user: IUser) => (
                   <UserRow
                     user={user}
                     key={user.id}

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

@@ -11,12 +11,12 @@ import UserDialog from './Dialog';
 
 // Types
 import { Nullable } from '../../types/common';
-import { TUser } from '../../types/user';
+import { IUser } from '../../types/users';
 
 const User = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const [reload, setReload] = useState(true);
-  const [user, setUser] = useState<Nullable<TUser>>(null);
+  const [user, setUser] = useState<Nullable<IUser>>(null);
   const [isAdd, setIsAdd] = useState(false);
 
   const openFormDialog = (isAddForm: boolean = false) => {

hotel-management/src/services/roomServices.ts

@@ -2,24 +2,24 @@ import toast from 'react-hot-toast';
 
 // Types
 import { Nullable } from '../types/common';
-import { TRoom } from '../types/rooms';
+import { IResponse } from '../types/responses';
-import { TResponse } from '../types/response';
+import { IRoom } from '../types/rooms';
 
 // Helpers
 import { sendRequest } from '../helpers/sendRequest';
+import { errorMsg } from '../helpers/helper';
 
 // Constants
 import { STATUS_CODE, RESPONSE_MESSAGE } from '../constants/responseStatus';
-import { errorMsg } from '../constants/messages';
 import { ROOM_PATH } from '../constants/path';
 
 /**
  * Get all rooms from server
  * @returns Return all rooms in server
  */
-const getAllRoom = async (): Promise<Nullable<TRoom[]>> => {
+const getAllRoom = async (): Promise<Nullable<IRoom[]>> => {
   try {
-    const response = await sendRequest<TRoom[]>(ROOM_PATH);
+    const response = await sendRequest<IRoom[]>(ROOM_PATH);
 
     if (response.statusCode === STATUS_CODE.OK) {
       const rooms = response.data!;
@@ -42,17 +42,17 @@ const getAllRoom = async (): Promise<Nullable<TRoom[]>> => {
  * @param roomId The id room need to be get
  * @returns Return the room object depend on room id
  */
-const getRoom = async (roomId: number): Promise<Nullable<TRoom>> => {
+const getRoom = async (roomId: number): Promise<Nullable<IRoom>> => {
   try {
-    const response = await sendRequest<TRoom>(ROOM_PATH + '/' + roomId);
+    const response = await sendRequest<IRoom>(ROOM_PATH + '/' + roomId);
 
-    if (response.statusCode === STATUS_CODE.OK) {
+    if (response.statusCode !== STATUS_CODE.OK) {
-      const rooms = response.data!;
-
-      return rooms;
-    } else {
       throw new Error(errorMsg(response.statusCode, response.msg));
     }
+
+    const rooms = response.data!;
+
+    return rooms;
   } catch (error) {
     if (error instanceof Error) {
       toast.error(error.message);
@@ -67,18 +67,14 @@ const getRoom = async (roomId: number): Promise<Nullable<TRoom>> => {
  * @param room Room object need to be updated
  * @returns The response object
  */
-const updateRoom = async (room: TRoom): Promise<Nullable<TResponse<TRoom>>> => {
+const updateRoom = async (room: IRoom): Promise<Nullable<IResponse<IRoom>>> => {
   try {
-    const response = await sendRequest<TRoom>(
+    const response = await sendRequest<IRoom>(
       ROOM_PATH + '/' + room.id,
       'PUT',
       JSON.stringify(room)
     );
 
-    if (response.statusCode !== STATUS_CODE.OK) {
-      throw new Error(errorMsg(response.statusCode, response.msg));
-    }
-
     return response;
   } catch (error: unknown) {
     if (error instanceof Error) {
@@ -100,45 +96,78 @@ const updateRoomStatus = async (
   roomId: number,
   status: boolean,
   roomIdNew?: number
-): Promise<Nullable<TResponse<TRoom>>> => {
+): Promise<Nullable<IResponse<IRoom>>> => {
-  if (!roomIdNew) {
+  try {
-    const response = await sendRequest<TRoom>(
+    if (!roomIdNew) {
-      ROOM_PATH + '/' + roomId,
+      const response = await sendRequest<IRoom>(
+        ROOM_PATH + '/' + roomId,
+        'PATCH',
+        JSON.stringify({ status: status })
+      );
+
+      return response;
+    }
+
+    // Update new room status
+    const resNewRoom = await sendRequest<IRoom>(
+      ROOM_PATH + '/' + roomIdNew,
       'PATCH',
       JSON.stringify({ status: status })
     );
 
-    return response;
+    // Update old room status;
-  }
+    const resOldRoom = await sendRequest<IRoom>(
-  
+      ROOM_PATH + '/' + roomId,
-  // Update new room status
+      'PATCH',
-  const resNewRoom = await sendRequest<TRoom>(
+      JSON.stringify({ status: !status })
-    ROOM_PATH + '/' + roomIdNew,
+    );
-    'PATCH',
-    JSON.stringify({ status: status })
-  );
 
-  // Update old room status;
+    if (
-  const resOldRoom = await sendRequest<TRoom>(
+      resNewRoom.statusCode === STATUS_CODE.OK &&
-    ROOM_PATH + '/' + roomId,
+      resOldRoom.statusCode === STATUS_CODE.OK
-    'PATCH',
+    ) {
-    JSON.stringify({ status: !status })
+      return {
-  );
+        statusCode: STATUS_CODE.OK,
-
+        msg: RESPONSE_MESSAGE.UPDATE_SUCCESS,
-  if (
+      };
-    resNewRoom.statusCode === STATUS_CODE.OK &&
+    }
-    resOldRoom.statusCode === STATUS_CODE.OK
+  } catch (error) {
-  ) {
+    if (error instanceof Error) {
-    return {
+      toast.error(error.message);
-      statusCode: STATUS_CODE.OK,
+    }
-      msg: RESPONSE_MESSAGE.UPDATE_SUCCESS,
-    };
   }
 
-  return {
+  return null;
-    statusCode: STATUS_CODE.INTERNAL_SERVER_ERROR,
-    msg: 'Something went wrong!',
-  };
 };
 
-export { getRoom, updateRoom, updateRoomStatus, getAllRoom };
+/**
+ * Add room to server
+ * @param room The room object need to be add
+ * @returns The response object if complete or null
+ */
+const addRoom = async (room: IRoom): Promise<Nullable<IResponse<IRoom>>> => {
+  try {
+    // Set default status room
+    room.status = false;
+
+    const response = await sendRequest<IRoom>(
+      ROOM_PATH,
+      'POST',
+      JSON.stringify(room)
+    );
+
+    if (response.statusCode !== STATUS_CODE.CREATE) {
+      throw new Error(errorMsg(response.statusCode, response.msg));
+    }
+
+    return response;
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      toast.error(error.message);
+    }
+  }
+
+  return null;
+};
+
+export { getRoom, updateRoom, updateRoomStatus, getAllRoom, addRoom };

hotel-management/src/services/userServices.ts

@@ -1,21 +1,53 @@
 import toast from 'react-hot-toast';
 
 // Constants
-import { errorMsg } from '../constants/messages';
 import { USER_PATH } from '../constants/path';
 import { STATUS_CODE } from '../constants/responseStatus';
 
 // Types
 import { Nullable } from '../types/common';
-import { TUser } from '../types/user';
+import { IResponse } from '../types/responses';
-import { TResponse } from '../types/response';
+import { IUser } from '../types/users';
 
 // Helpers
 import { sendRequest } from '../helpers/sendRequest';
+import { errorMsg } from '../helpers/helper';
 
-const updateUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
+/**
+ * Create user to the server
+ * @param user The user object need to be created
+ * @returns The IResponse object if success or null
+ */
+const createUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
   try {
-    const response = await sendRequest<TUser>(
+    const response = await sendRequest<IUser>(
+      USER_PATH,
+      'POST',
+      JSON.stringify(user)
+    );
+
+    if (response.statusCode !== STATUS_CODE.CREATE) {
+      throw new Error(errorMsg(response.statusCode, response.msg));
+    }
+
+    return response;
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      toast.error(error.message);
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Update the user to the server
+ * @param user The user object need to be updated
+ * @returns The IResponse object if update success or null
+ */
+const updateUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
+  try {
+    const response = await sendRequest<IUser>(
       USER_PATH + '/' + user.id,
       'PUT',
       JSON.stringify(user)
@@ -35,7 +67,12 @@ const updateUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
   return null;
 };
 
-const checkOutUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
+/**
+ * Checkout user
+ * @param user The user need to be checkout
+ * @returns The IResponse object if checkout success or not
+ */
+const checkOutUser = async (user: IUser): Promise<Nullable<IResponse<IUser>>> => {
   const tempUser = user;
 
   if (tempUser) {
@@ -48,4 +85,4 @@ const checkOutUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> =>
   return null;
 };
 
-export { updateUser, checkOutUser };
+export { updateUser, checkOutUser, createUser };

hotel-management/src/types/response.ts

@@ -1,7 +0,0 @@
-type TResponse<T> = {
-  statusCode: number;
-  msg: string;
-  data?: T;
-};
-
-export type { TResponse };

hotel-management/src/types/responses.ts

@@ -0,0 +1,7 @@
+interface IResponse<T> {
+  statusCode: number;
+  msg: string;
+  data?: T;
+}
+
+export type { IResponse };

hotel-management/src/types/rooms.ts

@@ -1,10 +1,10 @@
-type TRoom = {
+interface IRoom {
   id: number;
   name: string;
   price: number;
   discount: number;
   finalPrice: number;
   status: boolean;
-};
+}
 
-export type { TRoom };
+export type { IRoom };

hotel-management/src/types/users.ts

@@ -1,9 +1,9 @@
-type TUser = {
+interface IUser {
   id: number;
   name: string;
   identifiedCode: string;
   phone: string;
   roomId: number;
-};
+}
 
-export type { TUser };
+export type { IUser };