Fix all comments

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

@@ -2,9 +2,11 @@ import styled from 'styled-components';
 
 const ButtonIcon = styled.button`
   background: none;
-  border: none;
+
   padding: 8px;
   transition: all 0.2s;
+  
+  border: none;
   border-radius: var(--radius-md);
 
   &:hover {

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

@@ -3,7 +3,9 @@ import { css } from 'styled-components';
 const CommonInput = css`
   border: 1px solid var(--border-color);
   border-radius: var(--radius-sm);
+
   padding: 10px 20px;
+  
   font-size: var(--fs-sm-x);
   
   width: 200px;

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

@@ -4,6 +4,7 @@ const StyledAppLayout = styled.div`
   display: grid;
   grid-template-columns: 300px 1fr;
   grid-template-rows: auto 1fr;
+  
   height: 100vh;
 `;
 

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

@@ -1,26 +1,29 @@
-import { forwardRef } from 'react';
+import { MutableRefObject, ReactNode, forwardRef } from 'react';
 
 // Styled
 import { StyledBody, StyledDialog, StyledTitle } from './styled';
 
+// Type
+import { Nullable } from '../../globals/types';
+
 export interface IDialogProps {
   title?: string;
-  children?: JSX.Element[] | JSX.Element;
+  children?: ReactNode;
   onClose?: () => void;
-  ref?: React.MutableRefObject<HTMLDialogElement | null>;
+  ref?: MutableRefObject<Nullable<HTMLDialogElement>>;
 }
 
-const Dialog = forwardRef((props: IDialogProps, ref) => {
+const Dialog = forwardRef<HTMLDialogElement, IDialogProps>(
+  (props: IDialogProps, ref) => {
     const { title, children, onClose } = props;
+    
     return (
-    <StyledDialog
-      ref={ref as React.LegacyRef<HTMLDialogElement> | undefined}
-      onClose={onClose}
-    >
+      <StyledDialog ref={ref} onClose={onClose}>
         <StyledTitle>{title}</StyledTitle>
         <StyledBody>{children}</StyledBody>
       </StyledDialog>
     );
-});
+  }
+);
 
 export default Dialog;

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

@@ -1,9 +1,11 @@
+import { FormEvent, ReactNode } from 'react';
+
 // Styled
 import { StyledActionBtn, StyledForm } from './styled';
 
 interface IFormProps {
-  children: JSX.Element | JSX.Element[];
-  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  children: ReactNode;
+  onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   id?: string;
 }
 

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

@@ -2,6 +2,7 @@ import styled from 'styled-components';
 
 const StyledHeader = styled.header`
   border-bottom: 1px solid var(--border-color);
+  
   padding: 20px 40px;
 
   display: flex;

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

@@ -1,10 +1,12 @@
+import { ReactNode } from 'react';
+
 // Styled
 import { Error, Label, StyledFormRow } from './styled';
 
 interface IFormRow {
   label: string;
   error?: string;
-  children: JSX.Element | JSX.Element[];
+  children: ReactNode;
 }
 
 const FormRow = ({ label, error, children }: IFormRow) => {

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

@@ -15,8 +15,10 @@ const Label = styled.label`
 const Error = styled.p`
   color: var(--error-text);
   font-size: var(--fs-sm-2x);
+
   margin-top: 5px;
   padding-inline: 5px;
+  
   width: 220px;
 `;
 

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

@@ -1,22 +1,28 @@
-import { useContext, useState } from 'react';
+import { MouseEvent, ReactNode, useContext, useState } from 'react';
 
 // Components
 import { HiEllipsisVertical } from 'react-icons/hi2';
+
+// Hooks
 import { useOutsideClick } from '../../hooks/useOutsideClick';
+
+// Styled
 import { StyledMenu, StyledButton, StyledList, StyledToggle } from './styled';
 
 // Contexts
 import MenusContext from '../../contexts/MenuContext';
 
+// Types
+import { Nullable } from '../../globals/types';
+
 interface IButton {
   children?: string;
-  icon?: JSX.Element;
+  icon?: ReactNode;
   onClick?: () => void;
 }
 
-const Menus = ({ children }: { children: JSX.Element }) => {
+const Menus = ({ children }: { children: ReactNode }) => {
   const [openId, setOpenId] = useState('');
-
   const close = () => setOpenId('');
   const open = setOpenId;
 
@@ -27,13 +33,14 @@ const Menus = ({ children }: { children: JSX.Element }) => {
   );
 };
 
-const Toggle = ({ id }: { id: string }): React.JSX.Element => {
+const Toggle = ({ id }: { id: string }): ReactNode => {
   const { openId, close, open } = useContext(MenusContext);
-
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
-    openId === '' || openId !== id ? open!(id) : close!();
+    openId === '' || openId !== id 
+      ? open!(id) 
+      : close!();
   };
 
   return (
@@ -48,8 +55,8 @@ const List = ({
   children,
 }: {
   id: string;
-  children: JSX.Element[];
-}): React.JSX.Element | null => {
+  children: ReactNode;
+}): Nullable<ReactNode> => {
   const { openId, close } = useContext(MenusContext);
   const ref = useOutsideClick(close!, false);
 
@@ -58,9 +65,8 @@ const List = ({
   return <StyledList ref={ref}>{children}</StyledList>;
 };
 
-const Button = ({ children, icon, onClick }: IButton): React.JSX.Element => {
+const Button = ({ children, icon, onClick }: IButton): ReactNode => {
   const { close } = useContext(MenusContext);
-
   const handleClick = () => {
     onClick?.();
     close!();

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

@@ -3,6 +3,7 @@ import styled from 'styled-components';
 const StyledMessage = styled.p`
   font-size: var(--fs-sm);
   text-align: center;
+  
   padding: 20px;
 `;
 

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

@@ -13,10 +13,8 @@ interface IOrderProps {
 
 const OrderBy = memo(({ options }: IOrderProps) => {
   const field = 'orderBy';
-
   const [searchParams, setSearchParams] = useSearchParams();
   const currentOrder = searchParams.get(field) || options[0].value;
-
   const handleClick = (value: string) => {
     searchParams.set(field, value);
 

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

@@ -14,7 +14,15 @@ interface IOrderBtn {
 
 const OrderButton = styled.button<IOrderBtn>`
   border: none;
+  border-radius: var(--radius-sm);
+
   cursor: pointer;
+  transition: all 0.3s;
+
+  font-weight: 500;
+  font-size: var(--fs-sm-x);
+  
+  padding: 5px 10px;
   
   ${(props) =>
     props.active &&
@@ -24,12 +32,6 @@ const OrderButton = styled.button<IOrderBtn>`
       cursor: no-drop;
     `}
 
-  border-radius: var(--radius-sm);
-  font-weight: 500;
-  font-size: var(--fs-sm-x);
-  padding: 5px 10px;
-  transition: all 0.3s;
-
   &:hover:not(:disabled) {
     background-color: var(--hover-dark-background-color);
   }

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

@@ -1,6 +1,11 @@
 import { memo, useEffect, useState } from 'react';
+
+// Styled
 import { StyledSearch } from './styled';
 
+// Hooks
+import { useDebounce } from '../../hooks/useDebounce';
+
 interface ISearch {
   setPlaceHolder: string;
   setValueSearch: (phone: string) => void;
@@ -8,14 +13,11 @@ interface ISearch {
 
 const Search = memo(({ setValueSearch, setPlaceHolder }: ISearch) => {
   const [query, setQuery] = useState('');
+  const debounceValue = useDebounce<string>(query, 700);
 
   useEffect(() => {
-    const timeOut = setTimeout(() => {
-      setValueSearch(query);
-    }, 500);
-
-    return () => clearTimeout(timeOut);
-  }, [setValueSearch, query]);
+    setValueSearch(debounceValue);
+  }, [debounceValue, setValueSearch]);
 
   return (
     <StyledSearch

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

@@ -4,8 +4,10 @@ import {
   UseFormRegister,
   useFormContext,
 } from 'react-hook-form';
+import { ChangeEventHandler, ReactNode } from 'react';
+
+// Styled
 import { StyledSelect } from './styled';
-import React, { ReactNode } from 'react';
 
 export interface ISelectOptions {
   value: string;
@@ -15,7 +17,7 @@ interface ISelect {
   options: ISelectOptions[];
   optionsConfigForm?: RegisterOptions<FieldValues, string> | undefined;
   value?: string;
-  onChange?: React.ChangeEventHandler<HTMLSelectElement> | undefined;
+  onChange?: ChangeEventHandler<HTMLSelectElement> | undefined;
   id?: string;
   ariaLabel: string;
 }

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

@@ -4,6 +4,7 @@ const StyledSidebar = styled.aside`
   padding: 50px 20px;
 
   grid-row: 1 / 3;
+
   border: 1px solid var(--border-color);
 `;
 
@@ -11,6 +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

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { memo } from 'react';
+import { ChangeEvent, memo } from 'react';
 
 // Components
 import Select from '../Select';
@@ -14,8 +14,7 @@ interface ISortByProps {
 const SortBy = memo(({ options }: ISortByProps) => {
   const [searchParams, setSearchParams] = useSearchParams();
   const sortBy = searchParams.get('sortBy') || '';
-
-  const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+  const handleChange = (event: ChangeEvent<HTMLSelectElement>) => {
     searchParams.set('sortBy', event.target.value);
     setSearchParams(searchParams);
   };

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

@@ -8,12 +8,12 @@ import TableContext from '../../contexts/TableContext';
 
 export interface ITable {
   columns?: string;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 interface ITableBody<T> {
   data?: T[];
-  render?: (value: T) => JSX.Element;
+  render?: CallbackMapFunc<T>;
 }
 
 type CallbackMapFunc<T> = (value: T, index: number, array: T[]) => ReactNode;
@@ -28,6 +28,7 @@ const Table = ({ columns, children }: ITable) => {
 
 const Header = ({ children }: ITable) => {
   const { columns } = useContext(TableContext);
+
   return <StyledHeader columns={columns}>{children}</StyledHeader>;
 };
 
@@ -41,6 +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/components/Table/styled.ts

@@ -1,11 +1,13 @@
 import styled from 'styled-components';
+
+// Interfaces
 import { ITable } from '.';
 
 const StyledTable = styled.div`
   border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
 
   font-size: 20px;
-  border-radius: var(--radius-md);
 `;
 
 const CommonRow = styled.div<ITable>`

hotel-management/src/constants/variables.ts

@@ -1,4 +1,3 @@
-// prettier-ignore
 const USER_PAGE = {
   SORTBY_OPTIONS: [
     {
@@ -35,7 +34,6 @@ const ORDERBY_OPTIONS = [
   },
 ];
 
-// prettier-ignore
 const ROOM_PAGE = {
   SORTBY_OPTIONS: [
     {
@@ -47,12 +45,11 @@ const ROOM_PAGE = {
       label: 'Sort by name',
     },
     {
-      value: 'price',
+      value: 'finalPrice',
       label: 'Sort by price',
     },
   ],
-}
-
+};
 
 const VALUE = 'value';
 const ERROR = 'error';
@@ -70,5 +67,5 @@ export {
   VALUE,
   ERROR,
   ORDERBY_OPTIONS,
-  INIT_VALUE_USER_FORM
+  INIT_VALUE_USER_FORM,
 };

hotel-management/src/contexts/MenuContext.ts

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
+import { Dispatch, SetStateAction, createContext } from 'react';
 
 interface IMenusContext {
   openId?: string;
   close?: () => void;
-  open?: React.Dispatch<React.SetStateAction<string>>;
+  open?: Dispatch<SetStateAction<string>>;
 }
 
 const MenusContext = createContext<IMenusContext>({});

hotel-management/src/globals/types.ts

@@ -11,49 +11,21 @@ type TRoom = {
   name: string;
   price: number;
   discount: number;
+  finalPrice: number;
   status: boolean;
 };
 
-type TStateSchema = {
-  [key: string]: {
-    value?: string;
-    error?: string;
-  };
-};
-
-type TKeyValue = {
-  [key: string]: boolean | undefined | string;
-};
-
-type TKeyString = {
-  [key: string]: string;
-};
-
-type TPropValues = 'value' | 'error' | boolean;
-
-type TValidator = {
-  [key: string]: {
-    required?: boolean;
-    validator?: {
-      func?: (value: string) => boolean;
-      error?: string;
-    };
-  };
-};
-
 type TResponse<T> = {
   statusCode: number;
   msg: string;
   data?: T;
 };
 
+type Nullable<T> = T | null;
+
 export type {
   TUser,
   TRoom,
-  TStateSchema,
-  TKeyValue,
-  TKeyString,
-  TPropValues,
-  TValidator,
   TResponse,
+  Nullable,
 };

hotel-management/src/helpers/sendRequest.ts

@@ -13,26 +13,25 @@ type TMethodRequest = 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
  * @param method HTTP method
  * @returns The status code and message from server
  */
-export const sendRequest = async <T,>(
+export const sendRequest = async <T>(
   path: string,
   method: TMethodRequest = 'GET',
-  body?: BodyInit,
+  body?: BodyInit
 ): Promise<TResponse<T>> => {
   const response = await fetch(BASE_URL + path, {
     method,
     body,
     headers: {
-      // prettier-ignore
       'Accept': 'application/json',
       'Content-Type': 'application/json',
     },
   });
 
-  const data = await response.json() as T;
+  const data = (await response.json()) as T;
 
   return {
     statusCode: response.status,
     msg: response.statusText,
-    data
+    data,
   };
 };

hotel-management/src/helpers/utils.ts

@@ -1,23 +1,6 @@
 // Constants
 import { REQUIRED_FIELD_ERROR } from '../constants/formValidateMessage';
 
-// Types
-import {
-  TKeyString,
-  TKeyValue,
-  TPropValues,
-  TStateSchema,
-} from '../globals/types';
-
-/**
- * The function check value has type boolean or not
- * @param value The value need to checked
- * @returns A boolean indicating whether or not the argument has type boolean
- */
-const isBool = (value: unknown) => {
-  return typeof value === 'boolean';
-};
-
 /**
  * Set required error for value
  * @param value The value set required or not
@@ -29,50 +12,6 @@ const isRequired = (value: string | number, isRequired: unknown) => {
   return '';
 };
 
-/**
- * Get values from props
- * @param stateSchema StateSchema value
- * @param prop Prop value (Has 3 type: boolean | "value" | "error")
- * @returns Return value object depend on props
- */
-const getPropValues = (stateSchema: TStateSchema, prop?: TPropValues) => {
-  return Object.keys(stateSchema).reduce((field, key) => {
-    field[key] = isBool(prop)
-      ? prop
-      : stateSchema[key][prop as Exclude<TPropValues, boolean>];
-
-    return field;
-  }, {} as TKeyValue);
-};
-
-/**
- * Return the object contains values of object pass
- * @param obj Object need to get value
- * @returns The object contains value of object
- */
-const getValueFromObj = <T>(obj: T | null = null): TKeyString => {
-  let result = {};
-
-  if (obj) {
-    for (const key of Object.keys(obj)) {
-      const tempValue = obj[key as keyof typeof obj];
-      let value: string | boolean = '';
-
-      if (typeof tempValue === 'string' || typeof tempValue === 'boolean') {
-        value = tempValue;
-      }
-
-      if (typeof tempValue === 'number') {
-        value = tempValue.toString();
-      }
-
-      result = { ...result, [`${key}Value`]: value };
-    }
-  }
-
-  return result;
-};
-
 /**
  * Create query url for search
  * @param columnSearch Column want to search
@@ -87,11 +26,15 @@ const searchQuery = (
   sort: string,
   order: string
 ) => {
-  const phoneParams = keySearch ? `${columnSearch}_like=` + keySearch : '';
-
-  const sortParams = sort ? '_sort=' + sort : '';
-
-  const orderParams = order ? '_order=' + order : '';
+  const phoneParams = keySearch 
+    ? `${columnSearch}_like=` + keySearch 
+    : '';
+  const sortParams = sort 
+    ? '_sort=' + sort 
+    : '';
+  const orderParams = order 
+    ? '_order=' + order 
+    : '';
   const finalParam = [phoneParams, sortParams, orderParams];
   let query = '';
   let isFirstParam = true;
@@ -117,11 +60,4 @@ const formatCurrency = (value: number): string => {
   }).format(value);
 };
 
-export {
-  isRequired,
-  getPropValues,
-  getValueFromObj,
-  searchQuery,
-  formatCurrency,
-  REQUIRED_FIELD_ERROR,
-};
+export { isRequired, searchQuery, formatCurrency, REQUIRED_FIELD_ERROR };

hotel-management/src/helpers/validators.ts

@@ -1,10 +1,19 @@
+/**
+ * Check value is valid name or not
+ * @param value Values need to be checked
+ * @returns A boolean indicating whether or not the argument has valid
+ */
+const isValidName = (value: string): boolean => {
+  return /^[a-zA-Z]{2,}(?: [a-zA-Z]+){0,2}$/gm.test(value);
+};
+
 /**
  * Check value is valid number or not
  * @param value Value need to be checked
  * @returns A boolean indicating whether or not the argument has valid
  */
-const isValidNumber = (value: unknown): boolean => {
-  return /^[0-9]*$/.test(value as string);
+const isValidNumber = (value: string): boolean => {
+  return /^[0-9]*$/.test(value);
 };
 
 /**
@@ -40,15 +49,21 @@ const isValidString = (value: string): boolean => {
  */
 const skipCheck = () => true;
 
+/**
+ * Check object is empty or not
+ * @param obj Object need to be check
+ * @returns A boolean indicating whether or not the argument has valid
+ */
 const isEmptyObj = (obj: object) => {
   return Object.keys(obj).length === 0;
-}
+};
 
 export {
+  isValidName,
   isValidNumber,
   isValidPhoneNumber,
   isValidString,
   skipCheck,
   isValidDiscount,
-  isEmptyObj
+  isEmptyObj,
 };

hotel-management/src/hooks/useDebounce.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+const useDebounce = <T>(value: T, delay: number): T => {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+};
+
+export { useDebounce };

hotel-management/src/hooks/useFetch.ts

@@ -4,9 +4,12 @@ import { useEffect, useState } from 'react';
 import { BASE_URL } from '../constants/path';
 import { DEFAULT_ORDER_BY, DEFAULT_SORT_BY } from '../constants/config';
 
-// Utils
+// Helpers
 import { searchQuery } from '../helpers/utils';
 
+// Types
+import { Nullable } from '../globals/types';
+
 /**
  * The function use to fetch data on server API.
  * @param path The path of url
@@ -23,11 +26,11 @@ const useFetch = (
   keyWord: string = '',
   tempSortBy?: string,
   tempOrderBy?: string,
-  reload?: boolean,
+  reload?: boolean
 ) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
-  const [errorFetchMsg, setErrorFetchMsg] = useState<string | null>(null);
+  const [errorFetchMsg, setErrorFetchMsg] = useState<Nullable<string>>(null);
 
   useEffect(() => {
     // Clear data
@@ -37,12 +40,9 @@ const useFetch = (
       setIsPending(true);
 
       // Set default value
-      // prettier-ignore
       const sortBy = tempSortBy
         ? tempSortBy
         : DEFAULT_SORT_BY;
-
-      // prettier-ignore
       const orderBy = tempOrderBy
         ? tempOrderBy
         : DEFAULT_ORDER_BY;
@@ -56,7 +56,7 @@ const useFetch = (
 
         if (!response.ok) {
           throw new Error(
-            `Error code: ${response.status} \n Messages: ${response.text}`,
+            `Error code: ${response.status} \n Messages: ${response.text}`
           );
         }
 

hotel-management/src/hooks/useForwardRef.ts

@@ -1,8 +1,11 @@
 import { ForwardedRef, useEffect, useRef } from 'react';
 
+// Types
+import { Nullable } from '../globals/types';
+
 const useForwardRef = <T>(
   ref: ForwardedRef<T>,
-  initialValue: T | null = null
+  initialValue: Nullable<T> = null
 ) => {
   const targetRef = useRef<T>(initialValue);
 

hotel-management/src/hooks/useOutsideClick.ts

@@ -1,4 +1,7 @@
-import { useEffect, useRef } from 'react';
+import { MutableRefObject, useEffect, useRef } from 'react';
+
+// Types
+import { Nullable } from '../globals/types';
 
 /**
  * Custom hook to call handler when click outside element
@@ -9,7 +12,7 @@ import { useEffect, useRef } from 'react';
 export const useOutsideClick = (
   handler: () => void,
   listeningCapturing = true,
-): React.MutableRefObject<HTMLUListElement | null> => {
+): MutableRefObject<Nullable<HTMLUListElement>> => {
   const ref = useRef<HTMLUListElement>(null);
 
   useEffect(() => {

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

@@ -1,25 +1,33 @@
-import { forwardRef, useEffect } from 'react';
+import {
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+  forwardRef,
+  useEffect,
+} from 'react';
 
 // Components
 import Dialog from '../../components/Dialog';
 import RoomForm from './Form';
-import { TRoom } from '../../globals/types';
 
+// Types
+import { Nullable, TRoom } from '../../globals/types';
+
+// Hooks
+import { useForwardRef } from '../../hooks/useForwardRef';
 
 interface IRoomDialog {
   onClose?: () => void;
   reload?: boolean;
-  setReload?: React.Dispatch<React.SetStateAction<boolean>>;
-  ref?: React.MutableRefObject<HTMLDialogElement | null>;
-  room?: TRoom | null;
+  setReload?: Dispatch<SetStateAction<boolean>>;
+  ref?: MutableRefObject<Nullable<HTMLDialogElement>>;
+  room?: Nullable<TRoom>;
   isAdd?: boolean;
 }
 
-const RoomDialog = forwardRef((props: IRoomDialog, ref) => {
-  const dialogRef = ref as React.MutableRefObject<
-    HTMLDialogElement | undefined
-  >;
-  // prettier-ignore
+const RoomDialog = forwardRef<HTMLDialogElement, IRoomDialog>(
+  (props: IRoomDialog, ref) => {
+    const dialogRef = useForwardRef(ref);
     const { 
       onClose,
       setReload,
@@ -55,6 +63,7 @@ const RoomDialog = forwardRef((props: IRoomDialog, ref) => {
         />
       </Dialog>
     );
-});
+  }
+);
 
 export default RoomDialog;

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

@@ -1,20 +1,42 @@
+import { Dispatch, SetStateAction, useEffect } from 'react';
+import toast from 'react-hot-toast';
 import styled from 'styled-components';
+
+// Hooks
+import { useForm } from 'react-hook-form';
+
+// Styled
 import Button from '../../commons/styles/Button.ts';
+import Input from '../../commons/styles/Input.ts';
 
 // Types
-import { TRoom } from '../../globals/types.ts';
-import { useForm } from 'react-hook-form';
+import { Nullable, TRoom } from '../../globals/types.ts';
+
+// Constants
 import { ROOM_PATH } from '../../constants/path.ts';
 import { STATUS_CODE } from '../../constants/responseStatus.ts';
-import toast from 'react-hot-toast';
-import { ADD_SUCCESS, EDIT_SUCCESS, errorMsg } from '../../constants/messages.ts';
+import {
+  ADD_SUCCESS,
+  EDIT_SUCCESS,
+  errorMsg,
+} from '../../constants/messages.ts';
+import {
+  INVALID_DISCOUNT,
+  INVALID_FIELD,
+  REQUIRED_FIELD_ERROR,
+} from '../../constants/formValidateMessage.ts';
+
+// Helpers
 import { sendRequest } from '../../helpers/sendRequest.ts';
-import Input from '../../commons/styles/Input.ts';
+import {
+  isValidDiscount,
+  isValidNumber,
+  isValidString,
+} from '../../helpers/validators.ts';
+
+// Components
 import FormRow from '../../components/LabelControl/index.tsx';
-import { INVALID_DISCOUNT, INVALID_FIELD, REQUIRED_FIELD_ERROR } from '../../constants/formValidateMessage.ts';
-import { isValidDiscount, isValidNumber, isValidString } from '../../helpers/validators.ts';
 import Form from '../../components/Form/index.tsx';
-import { useEffect } from 'react';
 
 const FormBtn = styled(Button)`
   width: 100%;
@@ -29,8 +51,8 @@ const FormBtn = styled(Button)`
 interface IRoomFormProp {
   onClose: () => void;
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
-  room?: TRoom | null;
+  setReload: Dispatch<SetStateAction<boolean>>;
+  room?: Nullable<TRoom>;
   isAdd: boolean;
 }
 
@@ -58,13 +80,17 @@ const RoomForm = ({
 
   // Submit form
   const onSubmit = async (room: TRoom) => {
+    // Calculate final price
+    room.finalPrice = room.price - (room.price * room.discount) / 100;
+
     try {
       if (isAdd) {
         // Add request
+
         const response = await sendRequest(
           ROOM_PATH,
           'POST',
-          JSON.stringify(room),
+          JSON.stringify(room)
         );
 
         if (response.statusCode === STATUS_CODE.CREATE) {
@@ -77,7 +103,7 @@ const RoomForm = ({
         const response = await sendRequest(
           ROOM_PATH + `/${room!.id}`,
           'PUT',
-          JSON.stringify(room),
+          JSON.stringify(room)
         );
 
         if (response.statusCode == STATUS_CODE.OK) {
@@ -108,25 +134,23 @@ const RoomForm = ({
           {...register('name', {
             required: REQUIRED_FIELD_ERROR,
             validate: {
-                checkValidName: (value) =>
-                  isValidString(value) || INVALID_FIELD,
+              checkValidName: (value) => isValidString(value) || INVALID_FIELD,
             },
             onChange: () => trigger('name'),
           })}
         />
       </FormRow>
 
-        <FormRow
-          label="Price"
-          error={errors?.price?.message}
-        >
+      <FormRow label="Price" error={errors?.price?.message}>
         <Input
           type="text"
           id="price"
           {...register('price', {
+            valueAsNumber: true,
             required: REQUIRED_FIELD_ERROR,
             validate: {
-                checkIdentifiedCode: (v) => isValidNumber(v) || INVALID_FIELD,
+              checkIdentifiedCode: (v) =>
+                isValidNumber(v.toString()) || INVALID_FIELD,
             },
             onChange: () => trigger('price'),
           })}
@@ -138,6 +162,7 @@ const RoomForm = ({
           type="text"
           id="phone"
           {...register('discount', {
+            valueAsNumber: true,
             required: REQUIRED_FIELD_ERROR,
             validate: {
               checkPhoneNum: (v) => isValidDiscount(v) || INVALID_DISCOUNT,
@@ -150,7 +175,6 @@ const RoomForm = ({
       <Form.Action>
         <FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
           {
-              // prettier-ignore
             isAdd 
             ? 'Add' 
             : 'Save'

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

@@ -1,5 +1,5 @@
 import { useSearchParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 
 // Components
@@ -15,7 +15,7 @@ import SortBy from '../../components/SortBy';
 import OrderBy from '../../components/OrderBy';
 
 // Types
-import { TRoom } from '../../globals/types';
+import { Nullable, TRoom } from '../../globals/types';
 
 // Constants
 import { useFetch } from '../../hooks/useFetch';
@@ -27,16 +27,16 @@ import { ORDERBY_OPTIONS, ROOM_PAGE } from '../../constants/variables';
 // Styled
 import Spinner from '../../commons/styles/Spinner';
 
-// Utils
+// Helpers
 import { sendRequest } from '../../helpers/sendRequest';
 import { formatCurrency } from '../../helpers/utils';
 
 interface IRoomRow {
   room: TRoom;
   openFormDialog: () => void;
-  setRoom: React.Dispatch<React.SetStateAction<TRoom | null>>;
+  setRoom: Dispatch<SetStateAction<Nullable<TRoom>>>;
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  setReload: Dispatch<SetStateAction<boolean>>;
 }
 
 const RoomRow = ({
@@ -46,12 +46,12 @@ const RoomRow = ({
   reload,
   setReload,
 }: IRoomRow) => {
-  const handleOnEdit = (room: TRoom) => {
+  const handleEdit = (room: TRoom) => {
     setRoom(room);
     openFormDialog();
   };
 
-  const handleOnDelete = async (room: TRoom) => {
+  const handleDelete = async (room: TRoom) => {
     if (confirm(CONFIRM_DELETE)) {
       const response = await sendRequest(ROOM_PATH + `/${room.id}`, 'DELETE');
 
@@ -64,12 +64,8 @@ const RoomRow = ({
     }
   };
 
-  const { id, name, price, discount, status } = room;
+  const { id, name, finalPrice, status } = room;
 
-  // Calculate final price
-  const finalPrice = price - (price * discount / 100);
-
-  // prettier-ignore
   const statusText = status
     ? 'Unavailable' 
     : 'Available';
@@ -87,11 +83,11 @@ const RoomRow = ({
         <Menus.List id={id.toString()}>
           <Menus.Button
             icon={<RiEditBoxFill />}
-            onClick={() => handleOnEdit(room)}
+            onClick={() => handleEdit(room)}
           >
             Edit
           </Menus.Button>
-          <Menus.Button icon={<HiTrash />} onClick={() => handleOnDelete(room)}>
+          <Menus.Button icon={<HiTrash />} onClick={() => handleDelete(room)}>
             Delete
           </Menus.Button>
         </Menus.List>
@@ -102,9 +98,9 @@ const RoomRow = ({
 
 interface IRoomTable {
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  setReload: Dispatch<SetStateAction<boolean>>;
   openFormDialog: () => void;
-  setRoom?: React.Dispatch<React.SetStateAction<TRoom | null>>;
+  setRoom?: Dispatch<SetStateAction<Nullable<TRoom>>>;
 }
 
 const RoomTable = ({

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

@@ -1,21 +1,21 @@
 import { useRef, useState } from 'react';
 
 // Components
-import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button';
 import RoomTable from './Table';
 
 // Styled
 import { StyledRoom, Title } from './styled';
+import Direction from '../../commons/styles/Direction';
+import Button from '../../commons/styles/Button';
 import RoomDialog from './Dialog';
 
 // Types
-import { TRoom } from '../../globals/types';
+import { Nullable, TRoom } from '../../globals/types';
 
 const Room = () => {
-  const dialogRef = useRef<HTMLDialogElement>();
+  const dialogRef = useRef<HTMLDialogElement>(null);
   const [reload, setReload] = useState(true);
-  const [room, setRoom] = useState<TRoom | null>(null);
+  const [room, setRoom] = useState<Nullable<TRoom>>(null);
   const [isAdd, setIsAdd] = useState(false);
 
   const openFormDialog = (isAddForm: boolean = false) => {

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

@@ -1,26 +1,33 @@
-import { forwardRef, useEffect } from 'react';
+import {
+  Dispatch,
+  MutableRefObject,
+  SetStateAction,
+  forwardRef,
+  useEffect,
+} from 'react';
 
 // Components
 import Dialog from '../../components/Dialog';
 import UserForm from './Form';
 
 // Types
-import { TUser } from '../../globals/types';
+import { Nullable, TUser } from '../../globals/types';
+
+// Hooks
 import { useForwardRef } from '../../hooks/useForwardRef';
 
 interface IUserDialog {
   onClose: () => void;
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
-  ref: React.MutableRefObject<HTMLDialogElement | null>;
-  user: TUser | null;
+  setReload: Dispatch<SetStateAction<boolean>>;
+  ref: MutableRefObject<Nullable<HTMLDialogElement>>;
+  user: Nullable<TUser>;
   isAdd: boolean;
 }
 
-const UserDialog = forwardRef((props, ref) => {
+const UserDialog = forwardRef<HTMLDialogElement, IUserDialog>((props, ref) => {
   const dialogRef = useForwardRef(ref);
 
-  // prettier-ignore
   const { 
     onClose,
     setReload,
@@ -56,6 +63,6 @@ const UserDialog = forwardRef((props, ref) => {
       />
     </Dialog>
   );
-}) as React.FC<IUserDialog>;
+});
 
 export default UserDialog;

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

@@ -1,5 +1,13 @@
-import { useCallback, useEffect, useState } from 'react';
+import {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import toast from 'react-hot-toast';
+
+// Hooks
 import { FormProvider, useForm } from 'react-hook-form';
 
 // Styled
@@ -8,14 +16,15 @@ import Input from '../../commons/styles/Input';
 // Components
 import Form from '../../components/Form';
 import FormRow from '../../components/LabelControl/index.tsx';
+import Select, { ISelectOptions } from '../../components/Select';
 
-// Utils
+// Helpers
 import { sendRequest } from '../../helpers/sendRequest.ts';
 import {
   isEmptyObj,
+  isValidName,
   isValidNumber,
   isValidPhoneNumber,
-  isValidString,
 } from '../../helpers/validators.ts';
 
 // Constants
@@ -26,26 +35,27 @@ import {
   errorMsg,
 } from '../../constants/messages.ts';
 import { USER_PATH } from '../../constants/path.ts';
-import Select, { ISelectOptions } from '../../components/Select';
-
-// Hooks
-
-// Styled
-import { FormBtn } from './styled.ts';
 import {
   INVALID_FIELD,
   INVALID_PHONE,
   REQUIRED_FIELD_ERROR,
 } from '../../constants/formValidateMessage.ts';
-import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
-import { TRoom, TUser } from '../../globals/types.ts';
 import { INIT_VALUE_USER_FORM } from '../../constants/variables.ts';
 
+// Styled
+import { FormBtn } from './styled.ts';
+
+// Services
+import { getAllRoom, updateRoomStatus } from '../../services/roomServices.ts';
+
+// Types
+import { Nullable, TRoom, TUser } from '../../globals/types.ts';
+
 interface IUserFormProp {
   onClose: () => void;
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
-  user: TUser | null;
+  setReload: Dispatch<SetStateAction<boolean>>;
+  user: Nullable<TUser>;
   isAdd: boolean;
 }
 
@@ -78,11 +88,13 @@ const UserForm = ({
         rooms.forEach((item) => {
           if (!item.status || tempUser?.roomId === item.id)
             options.push({
-              label: item.name! as string,
+              label: item.name!,
               value: item.id!.toString(),
             });
         });
+      }
 
+      if (options.length > 0) {
         setOptions(options);
         reset({ roomId: +options[0].value });
       }
@@ -178,8 +190,7 @@ const UserForm = ({
             {...register('name', {
               required: REQUIRED_FIELD_ERROR,
               validate: {
-                checkValidName: (value) =>
-                  isValidString(value) || INVALID_FIELD,
+                checkValidName: (value) => isValidName(value) || INVALID_FIELD,
               },
               onChange: () => trigger('name'),
             })}
@@ -196,7 +207,8 @@ const UserForm = ({
             {...register('identifiedCode', {
               required: REQUIRED_FIELD_ERROR,
               validate: {
-                checkIdentifiedCode: (v) => isValidNumber(v) || INVALID_FIELD,
+                checkIdentifiedCode: (v) =>
+                  isValidNumber(v.toString()) || INVALID_FIELD,
               },
               onChange: () => trigger('identifiedCode'),
             })}
@@ -218,6 +230,7 @@ const UserForm = ({
         </FormRow>
 
         <FormRow label="Room">
+          {options && options.length > 0 ? (
             <Select
               id="roomId"
               options={options!}
@@ -227,16 +240,14 @@ const UserForm = ({
                 onChange: () => trigger('roomId'),
               }}
             />
+          ) : (
+            <p>No room available!</p>
+          )}
         </FormRow>
 
         <Form.Action>
           <FormBtn type="submit" name="submit" disabled={!isDirty || !isValid}>
-            {
-              // prettier-ignore
-              isAdd
-              ? 'Add'
-              : 'Save'
-            }
+            {isAdd ? 'Add' : 'Save'}
           </FormBtn>
           <FormBtn type="button" styled="secondary" onClick={onClose}>
             Close

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

@@ -1,11 +1,10 @@
 import { useSearchParams } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 
 // Components
 import { RiEditBoxFill } from 'react-icons/ri';
 import { IoExit } from 'react-icons/io5';
-import { StyledOperationTable } from './styled';
 import Menus from '../../components/Menus';
 import Table from '../../components/Table';
 import Direction from '../../commons/styles/Direction';
@@ -15,27 +14,30 @@ import SortBy from '../../components/SortBy';
 import OrderBy from '../../components/OrderBy';
 
 // Types
-import { TUser } from '../../globals/types';
+import { Nullable, TUser } from '../../globals/types';
+
+// Hooks
+import { useFetch } from '../../hooks/useFetch';
 
 // Constants
-import { useFetch } from '../../hooks/useFetch';
 import { STATUS_CODE } from '../../constants/responseStatus';
 import { ORDERBY_OPTIONS, USER_PAGE } from '../../constants/variables';
+import { CONFIRM_MESSAGE } from '../../constants/messages';
 
 // Styled
+import { StyledOperationTable } from './styled';
 import Spinner from '../../commons/styles/Spinner';
 
-// Utils
+// Services
 import { updateRoomStatus } from '../../services/roomServices';
 import { checkOutUser } from '../../services/userServices';
-import { CONFIRM_MESSAGE } from '../../constants/messages';
 
 interface IUserRow {
   user: TUser;
   openFormDialog: () => void;
-  setUser: React.Dispatch<React.SetStateAction<TUser | null>>;
+  setUser: Dispatch<SetStateAction<Nullable<TUser>>>;
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  setReload: Dispatch<SetStateAction<boolean>>;
 }
 
 const UserRow = ({
@@ -45,12 +47,12 @@ const UserRow = ({
   reload,
   setReload,
 }: IUserRow) => {
-  const handleOnEdit = (user: TUser) => {
+  const handleEdit = (user: TUser) => {
     setUser(user);
     openFormDialog();
   };
 
-  const handleOnCheckOut = async (user: TUser) => {
+  const handleCheckOut = async (user: TUser) => {
     if (confirm(CONFIRM_MESSAGE)) {
       const resUpdateStatus = await updateRoomStatus(user.roomId, false);
       const resCheckoutUser = await checkOutUser(user);
@@ -75,7 +77,11 @@ const UserRow = ({
       <div>{name}</div>
       <div>{identifiedCode}</div>
       <div>{phone}</div>
-      <div>{roomId ? roomId : 'None'}</div>
+      <div>{
+        roomId 
+          ? roomId 
+          : 'None'
+      }</div>
 
       <Menus.Menu>
         <Menus.Toggle id={id.toString()} />
@@ -83,14 +89,11 @@ const UserRow = ({
         <Menus.List id={id.toString()}>
           <Menus.Button
             icon={<RiEditBoxFill />}
-            onClick={() => handleOnEdit(user)}
+            onClick={() => handleEdit(user)}
           >
             Edit
           </Menus.Button>
-          <Menus.Button
-            icon={<IoExit />}
-            onClick={() => handleOnCheckOut(user)}
-          >
+          <Menus.Button icon={<IoExit />} onClick={() => handleCheckOut(user)}>
             Check out
           </Menus.Button>
         </Menus.List>
@@ -101,9 +104,9 @@ const UserRow = ({
 
 interface IUserTable {
   reload: boolean;
-  setReload: React.Dispatch<React.SetStateAction<boolean>>;
+  setReload: Dispatch<SetStateAction<boolean>>;
   openFormDialog: () => void;
-  setUser?: React.Dispatch<React.SetStateAction<TUser | null>>;
+  setUser?: Dispatch<SetStateAction<Nullable<TUser>>>;
 }
 
 const UserTable = ({

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

@@ -1,21 +1,21 @@
 import { useRef, useState } from 'react';
 
 // Components
-import Direction from '../../commons/styles/Direction';
-import Button from '../../commons/styles/Button';
 import UserTable from './Table';
 
 // Styled
+import Button from '../../commons/styles/Button';
+import Direction from '../../commons/styles/Direction';
 import { StyledUser, Title } from './styled';
 import UserDialog from './Dialog';
 
 // Types
-import { TUser } from '../../globals/types';
+import { Nullable, TUser } from '../../globals/types';
 
 const User = () => {
   const dialogRef = useRef<HTMLDialogElement>(null);
   const [reload, setReload] = useState(true);
-  const [user, setUser] = useState<TUser | null>(null);
+  const [user, setUser] = useState<Nullable<TUser>>(null);
   const [isAdd, setIsAdd] = useState(false);
 
   const openFormDialog = (isAddForm: boolean = false) => {

hotel-management/src/services/roomServices.ts

@@ -1,11 +1,21 @@
 import toast from 'react-hot-toast';
-import { TResponse, TRoom } from '../globals/types';
+
+// Types
+import { Nullable, TResponse, TRoom } from '../globals/types';
+
+// Helpers
 import { sendRequest } from '../helpers/sendRequest';
+
+// Constants
 import { STATUS_CODE, RESPONSE_MESSAGE } from '../constants/responseStatus';
 import { errorMsg } from '../constants/messages';
 import { ROOM_PATH } from '../constants/path';
 
-const getAllRoom = async (): Promise<TRoom[] | null> => {
+/**
+ * Get all rooms from server
+ * @returns Return all rooms in server
+ */
+const getAllRoom = async (): Promise<Nullable<TRoom[]>> => {
   try {
     const response = await sendRequest<TRoom[]>(ROOM_PATH);
 
@@ -25,7 +35,12 @@ const getAllRoom = async (): Promise<TRoom[] | null> => {
   return null;
 };
 
-const getRoom = async (roomId: number): Promise<TRoom | null> => {
+/**
+ * Get room by id
+ * @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>> => {
   try {
     const response = await sendRequest<TRoom>(ROOM_PATH + '/' + roomId);
 
@@ -45,7 +60,12 @@ const getRoom = async (roomId: number): Promise<TRoom | null> => {
   return null;
 };
 
-const updateRoom = async (room: TRoom): Promise<TResponse<TRoom> | null> => {
+/**
+ * Update room into server
+ * @param room Room object need to be updated
+ * @returns The response object
+ */
+const updateRoom = async (room: TRoom): Promise<Nullable<TResponse<TRoom>>> => {
   try {
     const response = await sendRequest<TRoom>(
       ROOM_PATH + '/' + room.id,
@@ -67,11 +87,18 @@ const updateRoom = async (room: TRoom): Promise<TResponse<TRoom> | null> => {
   return null;
 };
 
+/**
+ * Update room status
+ * @param roomId The id room need to be updated
+ * @param status Status of room
+ * @param roomIdNew The new id room need to be updated
+ * @returns Return the response object
+ */
 const updateRoomStatus = async (
   roomId: number,
   status: boolean,
   roomIdNew?: number
-): Promise<TResponse<TRoom> | null> => {
+): Promise<Nullable<TResponse<TRoom>>> => {
   if (!roomIdNew) {
     const response = await sendRequest<TRoom>(
       ROOM_PATH + '/' + roomId,
@@ -80,7 +107,8 @@ const updateRoomStatus = async (
     );
 
     return response;
-  } else {
+  }
+  
   // Update new room status
   const resNewRoom = await sendRequest<TRoom>(
     ROOM_PATH + '/' + roomIdNew,
@@ -109,23 +137,6 @@ const updateRoomStatus = async (
     statusCode: STATUS_CODE.INTERNAL_SERVER_ERROR,
     msg: 'Something went wrong!',
   };
-  }
-
-  // if (rooms?.length) {
-  //   const oldRoom = rooms.find((room) => room.id === roomId);
-  //   const newRoom = rooms.find((room) => room.id === roomIdNew);
-
-  //   if(newRoom) {
-
-  //   }
-
-  //   oldRoom!.status = status;
-  //   const response = await updateRoom(oldRoom!);
-
-  //   return response;
-  // }
-
-  return null;
 };
 
 export { getRoom, updateRoom, updateRoomStatus, getAllRoom };

hotel-management/src/services/userServices.ts

@@ -1,11 +1,17 @@
 import toast from 'react-hot-toast';
+
+// Constants
 import { errorMsg } from '../constants/messages';
 import { USER_PATH } from '../constants/path';
 import { STATUS_CODE } from '../constants/responseStatus';
-import { TResponse, TUser } from '../globals/types';
+
+// Types
+import { Nullable, TResponse, TUser } from '../globals/types';
+
+// Helpers
 import { sendRequest } from '../helpers/sendRequest';
 
-const updateUser = async (user: TUser): Promise<TResponse<TUser> | null> => {
+const updateUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
   try {
     const response = await sendRequest<TUser>(
       USER_PATH + '/' + user.id,
@@ -27,7 +33,7 @@ const updateUser = async (user: TUser): Promise<TResponse<TUser> | null> => {
   return null;
 };
 
-const checkOutUser = async (user: TUser): Promise<TResponse<TUser> | null> => {
+const checkOutUser = async (user: TUser): Promise<Nullable<TResponse<TUser>>> => {
   const tempUser = user;
 
   if (tempUser) {