Merge branch 'react-practice-02' into feat/unit-test-for-function

hotel-management/.gitignore

@@ -13,6 +13,7 @@ dist-ssr
 coverage
 *.local
 .vscode
+coverage
 .jest
 
 # Editor directories and files

hotel-management/src/App.tsx

@@ -18,7 +18,9 @@ import {
   initialState,
   reducer,
 } from '@context/UserRoomAvailableContext';
-import { useEffect, useReducer } from 'react';
+import { useEffect, useMemo, useReducer } from 'react';
+
+// Services
 import { getUserNotBooked } from '@service/userServices';
 import { getRoomsAvailable } from '@service/roomServices';
 
@@ -55,16 +57,21 @@ function App() {
     load();
   }, []);
 
+  const store = useMemo(() => {
+    return { roomsAvailable, usersAvailable, dispatch };
+  }, [roomsAvailable, usersAvailable]);
+
   return (
     <QueryClientProvider client={queryClient}>
       <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-        <UserRoomAvailableContext.Provider
+        <UserRoomAvailableContext.Provider value={store}>
-          value={{ roomsAvailable, usersAvailable, dispatch }}
-        >
           <BrowserRouter>
             <Routes>
               <Route element={<AppLayout />}>
-                <Route index element={<Navigate replace to={PATH.DASHBOARD} />} />
+                <Route
+                  index
+                  element={<Navigate replace to={PATH.DASHBOARD} />}
+                />
                 <Route path={PATH.DASHBOARD} element={<Dashboard />} />
                 <Route path={PATH.USER} element={<User />} />
                 <Route path={PATH.ROOM} element={<Room />} />

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

@@ -16,10 +16,10 @@ const variations: IVariations = {
     background-color: var(--danger-btn-color);
     color: var(--light-text);
   `,
-};
+} as const;
 
 interface IButtonStyle {
-  variations?: keyof IVariations;
+  variations?: keyof typeof variations;
 }
 
 const Button = styled.button<IButtonStyle>`

hotel-management/src/components/AppLayout/AppLayout.test.tsx

@@ -4,14 +4,14 @@ import { BrowserRouter } from 'react-router-dom';
 // Components
 import AppLayout from '.';
 
-describe('AppLayout testing snapshot', () => {
+describe('AppLayout', () => {
   const wrapper = renderer.create(
     <BrowserRouter>
       <AppLayout />
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/AppLayout/__snapshots__/AppLayout.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AppLayout testing snapshot render 1`] = `
+exports[`AppLayout Should render correctly 1`] = `
 <div
   className="sc-iCoHzw jFLeHb"
 >

hotel-management/src/components/ButtonIcon/ButtonIcon.test.tsx

@@ -1,17 +1,19 @@
-import renderer from 'react-test-renderer'
+import renderer from 'react-test-renderer';
 
 // Components
-import ButtonIcon from '.'
+import ButtonIcon from '.';
-import { HiOutlineLogout } from 'react-icons/hi'
+import { HiOutlineLogout } from 'react-icons/hi';
 
-describe('ButtonIcon testing snapshot', () => {
+describe('ButtonIcon', () => {
-  const wrapper = renderer.create(<ButtonIcon
+  const wrapper = renderer.create(
+    <ButtonIcon
       aria-label="Logout"
       icon={<HiOutlineLogout />}
       iconStyle={{ size: '23px' }}
-  />)
+    />
+  );
 
-  test('render', () => {
+  test('Should render correctly', () => {
-    expect(wrapper).toMatchSnapshot()
+    expect(wrapper).toMatchSnapshot();
-  })
+  });
-})
+});

hotel-management/src/components/ButtonIcon/__snapshots__/ButtonIcon.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ButtonIcon testing snapshot render 1`] = `
+exports[`ButtonIcon Should render correctly 1`] = `
 <button
   className="sc-bdnyFh bxHnoO"
   iconStyle={

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

@@ -1,92 +1,5 @@
-import { COLOR, SIZE } from '@constant/styles';
 import { ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import { StyledButtonIcon } from './styled';
-
-interface IStyledButtonIcon {
-  isHaveChildren: boolean;
-  style?: {
-    fontSize?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
-}
-
-const StyledButtonIcon = styled.button<IStyledButtonIcon>`
-  background: none;
-
-  padding: 10px;
-  transition: all 0.2s;
-
-  border: none;
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.color &&
-    css`
-      font-size: ${props.color};
-    `}
-
-  ${(props) =>
-    props.isHaveChildren
-      ? css`
-          display: flex;
-          align-items: center;
-          gap: 10px;
-
-          text-align: left;
-          width: 100%;
-        `
-      : css`
-          border-radius: var(--radius-md);
-        `}
-
-  &:hover {
-    background-color: var(--hover-background-color);
-  }
-
-  & svg {
-    ${(props) =>
-      props.iconStyle?.size &&
-      css`
-        width: ${props.iconStyle.size};
-        height: ${props.iconStyle.size};
-      `}
-
-    ${(props) =>
-      props.iconStyle?.color &&
-      css`
-        color: ${props.iconStyle.color};
-      `}
-    transition: all 0.3s;
-  }
-`;
-
-StyledButtonIcon.defaultProps = {
-  style: {
-    fontSize: SIZE.DEFAULT,
-    backgroundColor: COLOR.DEFAULT,
-    color: COLOR.BLACK,
-  },
-  iconStyle: {
-    color: COLOR.BLACK,
-    size: SIZE.DEFAULT,
-  },
-};
 
 interface IButtonIcon {
   icon: ReactNode;

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

@@ -0,0 +1,90 @@
+import styled, { css } from 'styled-components';
+import { COLOR, SIZE } from '@constant/styles';
+
+interface IStyledButtonIcon {
+  isHaveChildren: boolean;
+  style?: {
+    fontSize?: string;
+    backgroundColor?: string;
+    color?: string;
+  };
+  iconStyle?: {
+    color?: string;
+    size?: string;
+  };
+}
+
+const StyledButtonIcon = styled.button<IStyledButtonIcon>`
+  background: none;
+
+  padding: 10px;
+  transition: all 0.2s;
+
+  border: none;
+
+  ${(props) =>
+    props.style?.fontSize &&
+    css`
+      font-size: ${props.style.fontSize};
+    `}
+
+  ${(props) =>
+    props.style?.fontSize &&
+    css`
+      font-size: ${props.style.fontSize};
+    `}
+
+  ${(props) =>
+    props.color &&
+    css`
+      font-size: ${props.color};
+    `}
+
+  ${(props) =>
+    props.isHaveChildren
+      ? css`
+          display: flex;
+          align-items: center;
+          gap: 10px;
+
+          text-align: left;
+          width: 100%;
+        `
+      : css`
+          border-radius: var(--radius-md);
+        `}
+
+  &:hover {
+    background-color: var(--hover-background-color);
+  }
+
+  & svg {
+    ${(props) =>
+      props.iconStyle?.size &&
+      css`
+        width: ${props.iconStyle.size};
+        height: ${props.iconStyle.size};
+      `}
+
+    ${(props) =>
+      props.iconStyle?.color &&
+      css`
+        color: ${props.iconStyle.color};
+      `}
+    transition: all 0.3s;
+  }
+`;
+
+StyledButtonIcon.defaultProps = {
+  style: {
+    fontSize: SIZE.DEFAULT,
+    backgroundColor: COLOR.DEFAULT,
+    color: COLOR.BLACK,
+  },
+  iconStyle: {
+    color: COLOR.BLACK,
+    size: SIZE.DEFAULT,
+  },
+};
+
+export { StyledButtonIcon };

hotel-management/src/components/ConfirmMessage/ConfirmMessage.test.tsx

@@ -3,12 +3,10 @@ import renderer from 'react-test-renderer';
 // Components
 import ConfirmMessage from '.';
 
-describe('ConfirmMessage testing snapshot', () => {
+describe('ConfirmMessage', () => {
   const isDisable = true;
   const message = 'Hello World!';
-  const handleOnConfirm = () => {
+  const handleOnConfirm = jest.fn();
-    console.log('Confirm');
-  };
 
   const wrapper = renderer.create(
     <ConfirmMessage
@@ -18,7 +16,7 @@ describe('ConfirmMessage testing snapshot', () => {
     />
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/ConfirmMessage/__snapshots__/ConfirmMessage.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ConfirmMessage testing snapshot render 1`] = `
+exports[`ConfirmMessage Should render correctly 1`] = `
 <div
   className="sc-bdnyFh dukbvo"
 >
@@ -11,7 +11,7 @@ exports[`ConfirmMessage testing snapshot render 1`] = `
     <button
       className="sc-gtsqUy eZzwwl"
       disabled={true}
-      onClick={[Function]}
+      onClick={[MockFunction]}
       variations="danger"
     >
       Delete

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

@@ -15,7 +15,6 @@ interface IConfirmMessage {
 
 const ConfirmMessage = memo(
   ({ message, disabled, onConfirm, onCloseModal }: IConfirmMessage) => {
-
     return (
       <StyledConfirmDelete>
         <p>{message}</p>

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

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled from 'styled-components';
 
 const StyledConfirmDelete = styled.div`
   width: 450px;

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

@@ -1,18 +1,17 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Form from '.';
 import Input from '@commonStyle/Input';
+
+// Styled
 import { FormBtn } from '@page/User/styled';
 
-describe('Form testing snapshot', () => {
+describe('Form ', () => {
   const isDisable = true;
   const errorMessage = 'This is error message';
-  const handleOnSubmit = () => {
+  const handleOnSubmit = jest.fn();
-    console.log('Confirm');
+  const handleOnClick = jest.fn();
-  };
-  const handleOnClick = () => {
-    console.log('On Click');
-  };
 
   const wrapper = renderer.create(
     <Form onSubmit={handleOnSubmit}>
@@ -35,7 +34,7 @@ describe('Form testing snapshot', () => {
     </Form>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Form/__snapshots__/Form.test.tsx.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form testing snapshot render 1`] = `
+exports[`Form  Should render correctly 1`] = `
 <form
   className="sc-bdnyFh bzxSLR"
-  onSubmit={[Function]}
+  onSubmit={[MockFunction]}
 >
   <div
     className="sc-dlniIP gZHESL"
@@ -61,7 +61,7 @@ exports[`Form testing snapshot render 1`] = `
     </button>
     <button
       className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
-      onClick={[Function]}
+      onClick={[MockFunction]}
       type="button"
       variations="secondary"
     >

hotel-management/src/components/Header/Header.test.tsx

@@ -1,10 +1,12 @@
-import renderer from 'react-test-renderer'
+import renderer from 'react-test-renderer';
-import Header from '.'
 
-describe('Header testing snapshot', () => {
+// Components
-  const wrapper = renderer.create(<Header accountName='Nezumi' />)
+import Header from '.';
 
-  test('render', () => {
+describe('Header', () => {
-    expect(wrapper).toMatchSnapshot()
+  const wrapper = renderer.create(<Header accountName="Nezumi" />);
-  })
+
-})
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/components/Header/__snapshots__/Header.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Header testing snapshot render 1`] = `
+exports[`Header Should render correctly 1`] = `
 <header
   className="sc-dlniIP cClxoS"
 >

hotel-management/src/components/HeaderMenu/HeaderMenu.test.tsx

@@ -1,11 +1,12 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import HeaderMenu from '.';
 
-describe('HeaderMenu testing snapshot', () => {
+describe('HeaderMenu', () => {
   const wrapper = renderer.create(<HeaderMenu />);
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/HeaderMenu/__snapshots__/HeaderMenu.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`HeaderMenu testing snapshot render 1`] = `
+exports[`HeaderMenu Should render correctly 1`] = `
 <ul
   className="sc-gtsqUy gOWXQs"
 >

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

@@ -1,13 +1,12 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Menus from '.';
 import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
 
-describe('Menus snapshot testing', () => {
+describe('Menus', () => {
   const id = '123';
-  const handleOnClick = () => {
+  const handleOnClick = jest.fn();
-    console.log('Click');
-  };
 
   const wrapper = renderer.create(
     <Menus>
@@ -26,7 +25,7 @@ describe('Menus snapshot testing', () => {
     </Menus>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Menus/__snapshots__/Menus.test.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Menus snapshot testing render 1`] = `
+exports[`Menus Should render correctly 1`] = `
 <div
-  className="sc-bdnyFh cumhtC"
+  className="sc-gtsqUy lbsvcs"
 >
   <button
     aria-label="Menu item 123"
-    className="sc-dlniIP jergss"
+    className="sc-hKFymg cjUckY"
     onClick={[Function]}
   >
     <svg

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

@@ -5,6 +5,7 @@ import { HiEllipsisVertical } from 'react-icons/hi2';
 
 // Hooks
 import { useOutsideClick } from '@hook/useOutsideClick';
+import ButtonIcon from '@component/ButtonIcon';
 
 // Styled
 import { StyledMenu, StyledList, StyledToggle } from './styled';
@@ -14,7 +15,8 @@ import MenusContext from '@context/MenuContext';
 
 // Types
 import { Nullable } from '@type/common';
-import ButtonIcon from '@component/ButtonIcon';
+
+// Constants
 import { COLOR } from '@constant/styles';
 
 interface IButton {

hotel-management/src/components/Message/Message.test.tsx

@@ -1,11 +1,12 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Message from '.';
 
-describe('Message testing snapshot', () => {
+describe('Message', () => {
   const wrapper = renderer.create(<Message>This is a message!</Message>);
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Message/__snapshots__/Message.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Message testing snapshot render 1`] = `
+exports[`Message Should render correctly 1`] = `
 <p
   className="sc-bdnyFh fIKUZt"
 >

hotel-management/src/components/Modal/Modal.test.tsx

@@ -4,7 +4,7 @@ import renderer from 'react-test-renderer';
 import Modal from '.';
 import Button from '@commonStyle/Button';
 
-describe('Modal testing snapshot', () => {
+describe('Modal', () => {
   const wrapper = renderer.create(
     <Modal>
       <Modal.Open
@@ -19,7 +19,7 @@ describe('Modal testing snapshot', () => {
     </Modal>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Modal/__snapshots__/Modal.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Modal testing snapshot render 1`] = `
+exports[`Modal Should render correctly 1`] = `
 <button
   className="sc-eCAqax jeAcqZ"
   onClick={[Function]}

hotel-management/src/components/Nav/Nav.test.tsx

@@ -1,17 +1,17 @@
 import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
 
 // Components
 import Nav from '.';
-import { BrowserRouter } from 'react-router-dom';
 
-describe('Nav testing snapshot', () => {
+describe('Nav', () => {
   const wrapper = renderer.create(
     <BrowserRouter>
       <Nav />
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Nav/__snapshots__/Nav.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Nav testing snapshot render 1`] = `
+exports[`Nav Should render correctly 1`] = `
 <nav
   className="sc-bdnyFh gGCifp"
 >

hotel-management/src/components/OrderBy/Order.test.tsx

@@ -1,9 +1,10 @@
 import renderer from 'react-test-renderer';
-
-import Order from '.';
 import { BrowserRouter } from 'react-router-dom';
 
-describe('<Order.test />', () => {
+// Components
+import Order from '.';
+
+describe('Order', () => {
   const options = [
     {
       value: 'Value 1',
@@ -21,7 +22,7 @@ describe('<Order.test />', () => {
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/OrderBy/__snapshots__/Order.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Order.test /> render 1`] = `
+exports[`Order Should render correctly 1`] = `
 <div
   className="sc-bdnyFh aZFGz"
 >

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

@@ -1,9 +1,10 @@
 import renderer from 'react-test-renderer';
-
-import Search from '.';
 import { BrowserRouter } from 'react-router-dom';
 
-describe('Search testing snapshot', () => {
+// Components
+import Search from '.';
+
+describe('Search', () => {
   const placeHolder = 'Search placeholder...';
   const wrapper = renderer.create(
     <BrowserRouter>
@@ -11,7 +12,7 @@ describe('Search testing snapshot', () => {
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Search/__snapshots__/Search.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Search testing snapshot render 1`] = `
+exports[`Search Should render correctly 1`] = `
 <input
   className="sc-bdnyFh eAgOPb"
   onChange={[Function]}

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

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 // Styled
 import { StyledSearch } from './styled';
 
 // Hooks
 import { useDebounce } from '@hook/useDebounce';
-import { useSearchParams } from 'react-router-dom';
+
+// Types
 import { Nullable } from '@type/common';
 
 interface ISearch {

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

@@ -1,8 +1,9 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Select from '.';
 
-describe('Select testing snapshot', () => {
+describe('Select', () => {
   const options = [
     {
       label: 'Option 1',
@@ -14,9 +15,7 @@ describe('Select testing snapshot', () => {
     }
   ];
   const value = 'Temp value';
-  const handleOnChange = () => {
+  const handleOnChange = jest.fn();
-    console.log('On change');
-  }
 
   const wrapper = renderer.create(
     <Select
@@ -27,7 +26,7 @@ describe('Select testing snapshot', () => {
     />
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -1,10 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select testing snapshot render 1`] = `
+exports[`Select Should render correctly 1`] = `
 <select
   aria-label="Sort"
   className="sc-bdnyFh dqXTRP"
-  onChange={[Function]}
+  onChange={[MockFunction]}
   value="Temp value"
 >
   <option

hotel-management/src/components/Sidebar/Sidebar.test.tsx

@@ -4,14 +4,14 @@ import { BrowserRouter } from 'react-router-dom';
 // Components
 import Sidebar from '.';
 
-describe('Sidebar testing snapshot', () => {
+describe('Sidebar', () => {
   const wrapper = renderer.create(
     <BrowserRouter>
       <Sidebar heading="Hotel Management" />
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Sidebar testing snapshot render 1`] = `
+exports[`Sidebar Should render correctly 1`] = `
 <aside
   className="sc-dlniIP dfcuiS"
 >

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

@@ -1,9 +1,10 @@
 import renderer from 'react-test-renderer';
-
-import SortBy from '.';
 import { BrowserRouter } from 'react-router-dom';
 
-describe('<SortBy.test />', () => {
+// Components
+import SortBy from '.';
+
+describe('SortBy', () => {
   const options = [
     {
       label: 'Option 1',
@@ -20,7 +21,7 @@ describe('<SortBy.test />', () => {
     </BrowserRouter>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/SortBy/__snapshots__/SortBy.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SortBy.test /> render 1`] = `
+exports[`SortBy Should render correctly 1`] = `
 <select
   aria-label="Sort"
   className="sc-bdnyFh dqXTRP"

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

@@ -1,13 +1,16 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Table from '.';
+
+// Types
 import { IUser } from '@type/users';
 
 interface ITableRow {
   user: IUser;
 }
 
-describe('Table testing snapshot', () => {
+describe('Table', () => {
   const columnName = ['Column 1', 'Column 2'];
   const tempUser: IUser[] = [
     {
@@ -23,7 +26,7 @@ describe('Table testing snapshot', () => {
       isBooked: false,
     },
   ];
-  const TableRow = ({user}: ITableRow) => {
+  const TableRow = ({ user }: ITableRow) => {
     const { id, name, phone, isBooked } = user;
 
     return (
@@ -35,7 +38,7 @@ describe('Table testing snapshot', () => {
       </Table.Row>
     );
   };
-  const renderRow = (user: IUser) => <TableRow user={user} key={user.id}/>
+  const renderRow = (user: IUser) => <TableRow user={user} key={user.id} />;
 
   const wrapper = renderer.create(
     <Table columns="10% 35% 30% 15% 10%">
@@ -44,7 +47,7 @@ describe('Table testing snapshot', () => {
     </Table>
   );
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Table/__snapshots__/Table.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Table testing snapshot render 1`] = `
+exports[`Table Should render correctly 1`] = `
 <div
   className="sc-bdnyFh eEibLN"
 >

hotel-management/src/components/Toast/Toast.test.tsx

@@ -1,11 +1,12 @@
 import renderer from 'react-test-renderer';
 
+// Components
 import Toast from '.';
 
-describe('Toast testing snapshot', () => {
+describe('Toast', () => {
   const wrapper = renderer.create(<Toast />);
 
-  test('render', () => {
+  test('Should render correctly', () => {
     expect(wrapper).toMatchSnapshot();
   });
 });

hotel-management/src/components/Toast/__snapshots__/Toast.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Toast testing snapshot render 1`] = `
+exports[`Toast Should render correctly 1`] = `
 <div
   onMouseEnter={[Function]}
   onMouseLeave={[Function]}

hotel-management/src/constants/commons.ts

@@ -43,20 +43,6 @@ const ROOM_PAGE = {
   ],
 };
 
-const INIT_VALUE_USER_FORM = {
-  name: '',
-  id: 0,
-  identifiedCode: '',
-  phone: '',
-};
-
-const INIT_VALUE_ROOM_FORM = {
-  name: '',
-  id: 0,
-  price: 0,
-  discount: 0,
-};
-
 const FORM = {
   EDIT: 'edit',
   DELETE: 'delete',
@@ -76,6 +62,4 @@ export {
   FORM,
   REGEX,
   ORDERBY_OPTIONS,
-  INIT_VALUE_USER_FORM,
-  INIT_VALUE_ROOM_FORM,
 };

hotel-management/src/constants/path.ts

@@ -2,5 +2,3 @@ export const DASHBOARD = '/dashboard';
 export const USER = '/user';
 export const ROOM = '/room';
 export const OTHER_PATH = '*';
-export const USER_PATH = 'users';
-export const ROOM_PATH = 'rooms';

hotel-management/src/contexts/UserRoomAvailableContext.ts

@@ -1,6 +1,8 @@
-import { IDataState } from '@type/common';
 import { Dispatch, createContext } from 'react';
 
+// Types
+import { IDataState } from '@type/common';
+
 interface IUserRoomState {
   usersAvailable: IDataState[];
   roomsAvailable: IDataState[];
@@ -36,16 +38,19 @@ const initialState: IUserRoomState = {
 
 const reducer = (state: IUserRoomState, action: IAction) => {
   switch (action.type) {
+
     case 'initRoom':
       return {
         ...state,
         roomsAvailable: action.payload,
       };
+
     case 'initUser':
       return {
         ...state,
         usersAvailable: action.payload,
       };
+
     case 'addUser': {
       const tempArr = state.usersAvailable;
       const itemExist = state.usersAvailable.find(
@@ -61,6 +66,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         usersAvailable: tempArr,
       };
     }
+
     case 'updateUserName': {
       const tempArr = state.usersAvailable;
 
@@ -77,6 +83,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         usersAvailable: tempArr,
       };
     }
+
     case 'removeUser':
       return {
         ...state,
@@ -84,6 +91,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
           (item) => item.id !== action.payload[0].id
         ),
       };
+
     case 'addRoom': {
       const tempArr = state.roomsAvailable;
       const itemExist = state.roomsAvailable.find(
@@ -99,6 +107,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         roomsAvailable: tempArr,
       };
     }
+
     case 'updateRoomName': {
       const tempArr = state.roomsAvailable;
 
@@ -115,6 +124,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
         roomsAvailable: tempArr,
       };
     }
+
     case 'removeRoom':
       return {
         ...state,
@@ -122,6 +132,7 @@ const reducer = (state: IUserRoomState, action: IAction) => {
           (item) => item.id !== action.payload[0].id
         ),
       };
+      
     default:
       throw new Error('Action unknown');
   }

hotel-management/src/hooks/rooms/useCreateRoom.ts

@@ -6,6 +6,8 @@ import { createRoom as createRoomFn } from '@service/roomServices';
 
 // Constants
 import { ADD_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/rooms/useUpdateRoom.ts

@@ -6,6 +6,8 @@ import { updateRoom as updateRoomFn } from '@service/roomServices';
 
 // Constants
 import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/useUserRoomAvailable.ts

@@ -1,6 +1,8 @@
-import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
 import { useContext } from 'react';
 
+// Contexts
+import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
+
 const useUserRoomAvailable = () => {
   const context = useContext(UserRoomAvailableContext);
 

hotel-management/src/hooks/users/useCreateUser.ts

@@ -6,6 +6,8 @@ import { createUser as createUserFn } from '@service/userServices';
 
 // Constants
 import { ADD_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/users/useUpdateUser.ts

@@ -6,6 +6,8 @@ import { updateUser as updateUserFn } from '@service/userServices';
 
 // Messages
 import { UPDATE_SUCCESS } from '@constant/messages';
+
+// Hooks
 import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 
 /**

hotel-management/src/hooks/users/useUsers.ts

@@ -1,9 +1,9 @@
-import toast from "react-hot-toast";
+import toast from 'react-hot-toast';
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from '@tanstack/react-query';
-import { useSearchParams } from "react-router-dom";
+import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllUsers } from "@service/userServices";
+import { getAllUsers } from '@service/userServices';
 
 /**
  * Fetch data of users from database
@@ -13,7 +13,7 @@ const useUsers = () => {
   const [searchParams] = useSearchParams();
   const sortByValue = searchParams.get('sortBy') || 'id';
   const orderByValue = searchParams.get('orderBy') || 'asc';
-  const phoneSearch = searchParams.get('search') || ''
+  const phoneSearch = searchParams.get('search') || '';
 
   const {
     isLoading,

hotel-management/src/pages/Dashboard.tsx

@@ -1,6 +1,8 @@
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
 import styled from 'styled-components';
 
+// Hooks
+import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+
 const StyledDashboard = styled.main`
   padding: 20px;
 `;

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

@@ -0,0 +1,22 @@
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import renderer from 'react-test-renderer';
+
+// Components
+import RoomForm from '../RoomForm';
+
+describe('RoomForm', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <RoomForm />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,28 @@
+import renderer from 'react-test-renderer';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Types
+import { IRoom } from '@type/rooms';
+
+// Components
+import RoomRow from '../RoomRow';
+
+describe('RoomRow', () => {
+  const tempRoom: IRoom = {
+    id: 1,
+    name: 'Temp Room',
+    price: 250,
+    status: true,
+  };
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <RoomRow room={tempRoom} key={tempRoom.id} />
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/Room/__tests__/RoomTable.test.tsx

@@ -0,0 +1,22 @@
+import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import RoomTable from '../RoomTable';
+
+describe('RoomTable', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <BrowserRouter>
+      <QueryClientProvider client={queryClient}>
+        <RoomTable />
+      </QueryClientProvider>
+    </BrowserRouter>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomForm.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomForm Should render correctly 1`] = `
+<form
+  className="sc-dlniIP bCPNqw"
+  onSubmit={[Function]}
+>
+  <div
+    className="sc-eCAqax eozPUK"
+  >
+    <label
+      className="sc-jSFipO cMYxin"
+    >
+      Name
+    </label>
+    <div>
+      <input
+        className="sc-gtsqUy fGZPSU"
+        id="name"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-eCAqax eozPUK"
+  >
+    <label
+      className="sc-jSFipO cMYxin"
+    >
+      Price
+    </label>
+    <div>
+      <input
+        className="sc-gtsqUy fGZPSU"
+        id="price"
+        name="price"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-hKFymg dteuGK"
+  >
+    <button
+      className="sc-bdnyFh sc-iCoHzw hHmoPp jAHgeA"
+      disabled={false}
+      name="submit"
+      type="submit"
+      variations="primary"
+    >
+      Add
+    </button>
+    <button
+      className="sc-bdnyFh sc-iCoHzw bjdOKm jAHgeA"
+      type="button"
+      variations="secondary"
+    >
+      Close
+    </button>
+  </div>
+</form>
+`;

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomRow.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomRow Should render correctly 1`] = `
+<div
+  className="sc-crzpnZ sc-bqGGcD gIMFtm jqrNRF"
+>
+  <div>
+    1
+  </div>
+  <div>
+    Temp Room
+  </div>
+  <div>
+    $250.00
+  </div>
+  <div>
+    Unavailable
+  </div>
+  <div>
+    <div
+      className="sc-fnVZQs CCxtf"
+    >
+      <button
+        aria-label="Menu item 1"
+        className="sc-bkbjWr fCztjK"
+        onClick={[Function]}
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;

hotel-management/src/pages/Room/__tests__/__snapshots__/RoomTable.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RoomTable Should render correctly 1`] = `
+<div
+  className="sc-iJCSeZ crZyCc"
+  type="vertical"
+>
+  <div
+    className="sc-lmgPJu cuMSiO"
+  >
+    <div
+      className="sc-crzpnZ iahNiP"
+    >
+      <button
+        active={true}
+        className="sc-dItHI guVVWw"
+        disabled={true}
+        onClick={[Function]}
+      >
+        Ascending
+      </button>
+      <button
+        active={false}
+        className="sc-dItHI fIRqtD"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Descending
+      </button>
+    </div>
+    <select
+      aria-label="Sort"
+      className="sc-iqAbyq czAJZn"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value="id"
+      >
+        Sort by id
+      </option>
+      <option
+        value="name"
+      >
+        Sort by name
+      </option>
+      <option
+        value="price"
+      >
+        Sort by price
+      </option>
+    </select>
+    <input
+      className="sc-kEqXeH jMVPeG"
+      onChange={[Function]}
+      placeholder="Search by name..."
+    />
+  </div>
+  <div
+    className="sc-giAruI hMNXks"
+  />
+</div>
+`;

hotel-management/src/pages/Room/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Room Should render correctly 1`] = `
+<main
+  className="sc-iwaiBT gPCYSC"
+>
+  <div
+    className="sc-iJCSeZ jDHUlN"
+    type="horizontal"
+  >
+    <h2
+      className="sc-cxNGUP ffcGOQ"
+    >
+      List Room
+    </h2>
+    <button
+      className="sc-bqGGcD cVmQmy"
+      onClick={[Function]}
+      variations="primary"
+    >
+      Add room
+    </button>
+  </div>
+  <div
+    className="sc-iJCSeZ crZyCc"
+    type="vertical"
+  >
+    <div
+      className="sc-lmgPJu cuMSiO"
+    >
+      <div
+        className="sc-crzpnZ iahNiP"
+      >
+        <button
+          active={true}
+          className="sc-dItHI guVVWw"
+          disabled={true}
+          onClick={[Function]}
+        >
+          Ascending
+        </button>
+        <button
+          active={false}
+          className="sc-dItHI fIRqtD"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Descending
+        </button>
+      </div>
+      <select
+        aria-label="Sort"
+        className="sc-iqAbyq czAJZn"
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          value="id"
+        >
+          Sort by id
+        </option>
+        <option
+          value="name"
+        >
+          Sort by name
+        </option>
+        <option
+          value="price"
+        >
+          Sort by price
+        </option>
+      </select>
+      <input
+        className="sc-kEqXeH jMVPeG"
+        onChange={[Function]}
+        placeholder="Search by name..."
+      />
+    </div>
+    <div
+      className="sc-giAruI hMNXks"
+    />
+  </div>
+</main>
+`;

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

@@ -0,0 +1,22 @@
+import Room from '..';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import renderer from 'react-test-renderer';
+
+describe('Room', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <Room />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -1,5 +1,5 @@
 // Components
-import RoomTable from './RomTable';
+import RoomTable from './RoomTable';
 import RoomForm from './RoomForm';
 import Modal from '@component/Modal';
 

hotel-management/src/pages/User/__tests__/UserForm.test.tsx

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+
+// Components
+import UserForm from '../UserForm';
+
+describe('UserForm', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <UserForm />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import renderer from 'react-test-renderer';
+
+// Types
+import { IUser } from '@type/users';
+
+// Components
+import UserRow from '../UserRow';
+
+describe('UserRow', () => {
+  const tempUser: IUser = {
+    id: 1,
+    name: 'Temp Room',
+    phone: '0324421232',
+    isBooked: false,
+  };
+  const queryClient = new QueryClient();
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <UserRow user={tempUser} />
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/User/__tests__/UserTable.test.tsx

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { BrowserRouter } from 'react-router-dom';
+import renderer from 'react-test-renderer';
+
+// Components
+import RoomTable from '@page/Room/RoomTable';
+
+describe('UserTable', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <RoomTable />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/pages/User/__tests__/__snapshots__/UserForm.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserForm Should render correctly 1`] = `
+<form
+  className="sc-gtsqUy jMGskL"
+  onSubmit={[Function]}
+>
+  <div
+    className="sc-hKFymg frexHr"
+  >
+    <label
+      className="sc-eCAqax dnXnhF"
+    >
+      Full Name
+    </label>
+    <div>
+      <input
+        className="sc-bdnyFh gejiRq"
+        id="name"
+        name="name"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-hKFymg frexHr"
+  >
+    <label
+      className="sc-eCAqax dnXnhF"
+    >
+      Phone
+    </label>
+    <div>
+      <input
+        className="sc-bdnyFh gejiRq"
+        id="phone"
+        name="phone"
+        onBlur={[Function]}
+        onChange={[Function]}
+        type="text"
+      />
+    </div>
+  </div>
+  <div
+    className="sc-dlniIP hBqqvG"
+  >
+    <button
+      className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
+      disabled={true}
+      name="submit"
+      type="submit"
+      variations="primary"
+    >
+      Add
+    </button>
+    <button
+      className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
+      type="button"
+      variations="secondary"
+    >
+      Close
+    </button>
+  </div>
+</form>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/UserRow.test.tsx.snap

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserRow Should render correctly 1`] = `
+<div
+  className="sc-jSFipO sc-iCoHzw hTfHNc eWZMfB"
+>
+  <div>
+    1
+  </div>
+  <div>
+    Temp Room
+  </div>
+  <div>
+    0324421232
+  </div>
+  <div>
+    No
+  </div>
+  <div>
+    <div
+      className="sc-jrsKJM cdPhia"
+    >
+      <button
+        aria-label="Menu item 1"
+        className="sc-iqAbyq fyjyXl"
+        onClick={[Function]}
+      >
+        <svg
+          aria-hidden="true"
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          strokeWidth="0"
+          style={
+            {
+              "color": undefined,
+            }
+          }
+          viewBox="0 0 24 24"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            clipRule="evenodd"
+            d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+            fillRule="evenodd"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</div>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/UserTable.test.tsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserTable Should render correctly 1`] = `
+<div
+  className="sc-iJCSeZ crZyCc"
+  type="vertical"
+>
+  <div
+    className="sc-lmgPJu cuMSiO"
+  >
+    <div
+      className="sc-crzpnZ iahNiP"
+    >
+      <button
+        active={true}
+        className="sc-dItHI guVVWw"
+        disabled={true}
+        onClick={[Function]}
+      >
+        Ascending
+      </button>
+      <button
+        active={false}
+        className="sc-dItHI fIRqtD"
+        disabled={false}
+        onClick={[Function]}
+      >
+        Descending
+      </button>
+    </div>
+    <select
+      aria-label="Sort"
+      className="sc-iqAbyq czAJZn"
+      onChange={[Function]}
+      value=""
+    >
+      <option
+        value="id"
+      >
+        Sort by id
+      </option>
+      <option
+        value="name"
+      >
+        Sort by name
+      </option>
+      <option
+        value="price"
+      >
+        Sort by price
+      </option>
+    </select>
+    <input
+      className="sc-kEqXeH jMVPeG"
+      onChange={[Function]}
+      placeholder="Search by name..."
+    />
+  </div>
+  <div
+    className="sc-giAruI hMNXks"
+  />
+</div>
+`;

hotel-management/src/pages/User/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`User Should render correctly 1`] = `
+<main
+  className="sc-fKgKDd iDHRyD"
+>
+  <div
+    className="sc-lmgPJu bFEqIE"
+    type="horizontal"
+  >
+    <h2
+      className="sc-bCwene htGYaf"
+    >
+      List User
+    </h2>
+    <button
+      className="sc-kfYpNk QIeuT"
+      onClick={[Function]}
+      variations="primary"
+    >
+      Add user
+    </button>
+  </div>
+  <div
+    className="sc-lmgPJu hehIVl"
+    type="vertical"
+  >
+    <div
+      className="sc-iwaiBT eOzYWb"
+    >
+      <div
+        className="sc-crzpnZ iahNiP"
+      >
+        <button
+          active={true}
+          className="sc-dItHI guVVWw"
+          disabled={true}
+          onClick={[Function]}
+        >
+          Ascending
+        </button>
+        <button
+          active={false}
+          className="sc-dItHI fIRqtD"
+          disabled={false}
+          onClick={[Function]}
+        >
+          Descending
+        </button>
+      </div>
+      <select
+        aria-label="Sort"
+        className="sc-iqAbyq czAJZn"
+        onChange={[Function]}
+        value=""
+      >
+        <option
+          value="id"
+        >
+          Sort by id
+        </option>
+        <option
+          value="name"
+        >
+          Sort by name
+        </option>
+        <option
+          value="phone"
+        >
+          Sort by phone
+        </option>
+      </select>
+      <input
+        className="sc-kEqXeH jMVPeG"
+        onChange={[Function]}
+        placeholder="Search by phone..."
+      />
+    </div>
+    <div
+      className="sc-iJCSeZ gDbWTd"
+    />
+  </div>
+</main>
+`;

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

@@ -0,0 +1,22 @@
+import renderer from 'react-test-renderer';
+import { BrowserRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+// Components
+import User from '..';
+
+describe('User', () => {
+  const queryClient = new QueryClient();
+
+  const wrapper = renderer.create(
+    <QueryClientProvider client={queryClient}>
+      <BrowserRouter>
+        <User />
+      </BrowserRouter>
+    </QueryClientProvider>
+  );
+
+  test('Should render correctly', () => {
+    expect(wrapper).toMatchSnapshot();
+  });
+});

hotel-management/src/services/roomServices.ts

@@ -1,9 +1,9 @@
 // Types
 import { IRoom } from '@type/rooms';
+import { IDataState } from '@type/common';
 
 // Services
 import supabase from './supabaseService';
-import { IDataState } from '@type/common';
 
 // Constants
 const ROOMS_TABLE = 'rooms';
@@ -25,7 +25,7 @@ const getAllRooms = async (
     .from(ROOMS_TABLE)
     .select('*')
     .order(sortBy, { ascending: orderBy === 'asc' })
-    .like('name', `%${roomName}%`);
+    .ilike('name', `%${roomName}%`);
 
   if (error) {
     console.error(error.message);

hotel-management/src/services/supabaseService.ts

@@ -1,8 +1,10 @@
-import { createClient } from "@supabase/supabase-js";
+import { createClient } from '@supabase/supabase-js';
-import { Database } from "@type/supabase";
+
+// Types
+import { Database } from '@type/supabase';
 
 // Constants
-import { supabaseKey, supabaseUrl } from "@constant/config";
+import { supabaseKey, supabaseUrl } from '@constant/config';
 
 const supabase = createClient<Database>(supabaseUrl, supabaseKey!);
 

hotel-management/src/services/userServices.ts

@@ -1,9 +1,9 @@
 // Types
 import { IUser } from '@type/users';
+import { IDataState } from '@type/common';
 
 // Services
 import supabase from './supabaseService';
-import { IDataState } from '@type/common';
 
 const USERS_TABLE = 'users';
 const ERROR_FETCHING = "Users can't be loaded!";
@@ -65,7 +65,7 @@ const getAllUsers = async (
     .from(USERS_TABLE)
     .select('*')
     .order(sortBy, { ascending: orderBy === 'asc' })
-    .like('phone', `%${phoneSearch}%`);
+    .ilike('phone', `%${phoneSearch}%`);
 
   if (error) {
     console.error(error.message);