Merge pull request #50 from Nez27/feat/fix-comments

Fix comment

hotel-management/jest-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom'

hotel-management/jest.config.ts

@@ -1,25 +1,18 @@
 import type { Config } from 'jest';
 
 const config: Config = {
+  preset: 'ts-jest',
   verbose: true,
   testEnvironment: 'jsdom',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
+    '.+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|gif)$':
+      'jest-transform-stub',
   },
   moduleNameMapper: {
-    '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.ts',
+    '@src/(.*)': ['<rootDir>/src/$1'],
-    '\\.(css|less|sass|scss)$': 'identity-obj-proxy',
-    '@service/(.*)': ['<rootDir>/src/services/$1'],
-    '@constant/(.*)': ['<rootDir>/src/constants/$1'],
-    '@hook/(.*)': ['<rootDir>/src/hooks/$1'],
-    '@helper/(.*)': ['<rootDir>/src/helpers/$1'],
-    '@context/(.*)': ['<rootDir>/src/contexts/$1'],
-    '@component/(.*)': ['<rootDir>/src/components/$1'],
-    '@commonStyle/(.*)': ['<rootDir>/src/commons/styles/$1'],
-    '@type/(.*)': ['<rootDir>/src/types/$1'],
-    '@page/(.*)': ['<rootDir>/src/pages/$1'],
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
   setupFiles: ['<rootDir>/.jest/setEnvVar.ts'],
   testEnvironmentOptions: {
     customExportConditions: [''],

hotel-management/jest.setup.ts

@@ -1 +0,0 @@
-import "@testing-library/jest-dom";

hotel-management/package.json

@@ -28,6 +28,7 @@
     "styled-components": "^6.1.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.23.3",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.1.0",
     "@testing-library/user-event": "^14.5.1",
@@ -45,6 +46,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-transform-stub": "^2.0.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.0.2",

hotel-management/pnpm-lock.yaml

@@ -40,6 +40,9 @@ dependencies:
     version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
 
 devDependencies:
+  '@babel/preset-typescript':
+    specifier: ^7.23.3
+    version: 7.23.3(@babel/core@7.23.2)
   '@testing-library/jest-dom':
     specifier: ^6.1.4
     version: 6.1.4(@types/jest@29.5.8)(jest@29.7.0)
@@ -91,6 +94,9 @@ devDependencies:
   jest-environment-jsdom:
     specifier: ^29.7.0
     version: 29.7.0
+  jest-transform-stub:
+    specifier: ^2.0.0
+    version: 2.0.0
   ts-jest:
     specifier: ^29.1.1
     version: 29.1.1(@babel/core@7.23.2)(jest@29.7.0)(typescript@5.2.2)
@@ -175,6 +181,13 @@ packages:
       jsesc: 2.5.2
     dev: true
 
+  /@babel/helper-annotate-as-pure@7.22.5:
+    resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
   /@babel/helper-compilation-targets@7.22.15:
     resolution: {integrity: sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw==}
     engines: {node: '>=6.9.0'}
@@ -186,6 +199,24 @@ packages:
       semver: 6.3.1
     dev: true
 
+  /@babel/helper-create-class-features-plugin@7.23.5(@babel/core@7.23.2):
+    resolution: {integrity: sha512-QELlRWxSpgdwdJzSJn4WAhKC+hvw/AtHbbrIoncKHkhKKR/luAlKkgBDcri1EzWAo8f8VvYVryEHN4tax/V67A==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-function-name': 7.23.0
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+      '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.2)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      semver: 6.3.1
+    dev: true
+
   /@babel/helper-environment-visitor@7.22.20:
     resolution: {integrity: sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==}
     engines: {node: '>=6.9.0'}
@@ -206,6 +237,13 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
+  /@babel/helper-member-expression-to-functions@7.23.0:
+    resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
   /@babel/helper-module-imports@7.22.15:
     resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==}
     engines: {node: '>=6.9.0'}
@@ -227,11 +265,44 @@ packages:
       '@babel/helper-validator-identifier': 7.22.20
     dev: true
 
+  /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.2):
+    resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-module-imports': 7.22.15
+      '@babel/helper-simple-access': 7.22.5
+      '@babel/helper-split-export-declaration': 7.22.6
+      '@babel/helper-validator-identifier': 7.22.20
+    dev: true
+
+  /@babel/helper-optimise-call-expression@7.22.5:
+    resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
   /@babel/helper-plugin-utils@7.22.5:
     resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.2):
+    resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-environment-visitor': 7.22.20
+      '@babel/helper-member-expression-to-functions': 7.23.0
+      '@babel/helper-optimise-call-expression': 7.22.5
+    dev: true
+
   /@babel/helper-simple-access@7.22.5:
     resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==}
     engines: {node: '>=6.9.0'}
@@ -239,6 +310,13 @@ packages:
       '@babel/types': 7.23.0
     dev: true
 
+  /@babel/helper-skip-transparent-expression-wrappers@7.22.5:
+    resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==}
+    engines: {node: '>=6.9.0'}
+    dependencies:
+      '@babel/types': 7.23.0
+    dev: true
+
   /@babel/helper-split-export-declaration@7.22.6:
     resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==}
     engines: {node: '>=6.9.0'}
@@ -418,6 +496,18 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.2):
+    resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.2)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-simple-access': 7.22.5
+    dev: true
+
   /@babel/plugin-transform-react-jsx-self@7.22.5(@babel/core@7.23.2):
     resolution: {integrity: sha512-nTh2ogNUtxbiSbxaT4Ds6aXnXEipHweN9YRgOX/oNXdf0cCrGn/+2LozFa3lnPV5D90MkjhgckCPBrsoSc1a7g==}
     engines: {node: '>=6.9.0'}
@@ -438,6 +528,33 @@ packages:
       '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
+  /@babel/plugin-transform-typescript@7.23.5(@babel/core@7.23.2):
+    resolution: {integrity: sha512-2fMkXEJkrmwgu2Bsv1Saxgj30IXZdJ+84lQcKKI7sm719oXs0BBw2ZENKdJdR1PjWndgLCEBNXJOri0fk7RYQA==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-annotate-as-pure': 7.22.5
+      '@babel/helper-create-class-features-plugin': 7.23.5(@babel/core@7.23.2)
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.2)
+    dev: true
+
+  /@babel/preset-typescript@7.23.3(@babel/core@7.23.2):
+    resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+    dependencies:
+      '@babel/core': 7.23.2
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/helper-validator-option': 7.22.15
+      '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.2)
+      '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.2)
+      '@babel/plugin-transform-typescript': 7.23.5(@babel/core@7.23.2)
+    dev: true
+
   /@babel/runtime@7.23.2:
     resolution: {integrity: sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg==}
     engines: {node: '>=6.9.0'}
@@ -3383,6 +3500,10 @@ packages:
       - supports-color
     dev: true
 
+  /jest-transform-stub@2.0.0:
+    resolution: {integrity: sha512-lspHaCRx/mBbnm3h4uMMS3R5aZzMwyNpNIJLXj4cEsV0mIUtS4IjYJLSoyjRCtnxb6RIGJ4NL2quZzfIeNhbkg==}
+    dev: true
+
   /jest-util@29.7.0:
     resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}

hotel-management/src/App.test.tsx

@@ -1,14 +1,14 @@
 import { render, act, RenderResult } from '@testing-library/react';
 
 // Services
-import * as userServices from '@service/userServices';
+import * as userServices from '@src/services/userServices';
-import * as roomServices from '@service/roomServices';
+import * as roomServices from '@src/services/roomServices';
 
 // Components
 import App from './App';
 
-jest.mock('@service/userServices');
+jest.mock('@src/services/userServices');
-jest.mock('@service/roomServices');
+jest.mock('@src/services/roomServices');
 
 describe('App', () => {
   let wrapper: RenderResult | null = null;

hotel-management/src/App.tsx

@@ -2,81 +2,30 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import isPropValid from '@emotion/is-prop-valid';
 import { StyleSheetManager } from 'styled-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { useEffect, useMemo, useReducer } from 'react';
 
 // Components
 import AppLayout from './components/AppLayout';
 import Toast from './components/Toast';
-import RouteProtected from '@component/RouteProtected';
+import RouteProtected from '@src/components/RouteProtected';
-import RootLayout from '@component/RootLayout';
+import RootLayout from '@src/components/RootLayout';
 
 // Pages
 import User from './pages/User';
 import Booking from './pages/Booking';
 import Room from './pages/Room';
 import NotFound from './pages/NotFound';
-import Login from '@page/Login';
+import Login from '@src/pages/Login';
-import Account from '@page/Account';
+import Account from '@src/pages/Account';
 
 // Constants
 import * as PATH from './constants/path';
 
-// Hooks
-import {
-  UserRoomAvailableContext,
-  initialState,
-  reducer,
-} from '@context/UserRoomAvailableContext';
-
-// Services
-import { getAllUsers } from '@service/userServices';
-import { getAllRooms } from '@service/roomServices';
-
 const queryClient = new QueryClient();
 
 function App() {
-  const [{ usersAvailable, roomsAvailable }, dispatch] = useReducer(
-    reducer,
-    initialState
-  );
-
-  // Init list user and room available
-  useEffect(() => {
-    const load = async () => {
-      const tempUser = await getAllUsers({
-        sortBy: 'id',
-        orderBy: 'asc',
-        phoneSearch: '',
-        page: 0,
-      });
-
-      if (tempUser) {
-        dispatch({ type: 'initUser', payload: tempUser.data });
-      }
-
-      const tempRoom = await getAllRooms({
-        sortBy: 'id',
-        orderBy: 'asc',
-        roomSearch: '',
-        page: 0,
-      });
-
-      if (tempRoom) {
-        dispatch({ type: 'initRoom', payload: tempRoom.data });
-      }
-    };
-
-    load();
-  }, []);
-
-  const store = useMemo(() => {
-    return { roomsAvailable, usersAvailable, dispatch };
-  }, [roomsAvailable, usersAvailable]);
-
   return (
     <QueryClientProvider client={queryClient}>
       <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-        <UserRoomAvailableContext.Provider value={store}>
         <BrowserRouter>
           <Routes>
             <Route element={<RootLayout />}>
@@ -87,10 +36,7 @@ function App() {
                   </RouteProtected>
                 }
               >
-                  <Route
+                <Route index element={<Navigate replace to={PATH.BOOKING} />} />
-                    index
-                    element={<Navigate replace to={PATH.BOOKING} />}
-                  />
                 <Route path={PATH.BOOKING} element={<Booking />} />
                 <Route path={PATH.USER} element={<User />} />
                 <Route path={PATH.ROOM} element={<Room />} />
@@ -101,7 +47,6 @@ function App() {
             </Route>
           </Routes>
         </BrowserRouter>
-        </UserRoomAvailableContext.Provider>
       </StyleSheetManager>
 
       <Toast />

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

@@ -1,7 +1,7 @@
 import styled, { css } from 'styled-components';
 
 // Types
-import { TDirection } from '@type/common';
+import { TDirection } from '@src/types/common';
 
 interface IDirection {
   type?: TDirection;

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

@@ -16,7 +16,6 @@ const Spinner = styled.div`
       top/10px 10px no-repeat,
     conic-gradient(#0000 30%, var(--primary-color));
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 10px), #000 0);
-  mask: none;
   animation: ${rotate} 1.5s infinite linear;
 `;
 

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

@@ -21,8 +21,9 @@ exports[`AppLayout Should render correctly 1`] = `
             <li>
               <button
                 aria-label="Profile"
-                class="sc-bdnyFh bxHnoO"
+                class="sc-bdnyFh olJWF"
-                iconstyle="[object Object]"
+                iconcolor="#000"
+                iconsize="23px"
               >
                 <svg
                   fill="currentColor"
@@ -41,14 +42,14 @@ exports[`AppLayout Should render correctly 1`] = `
                   />
                 </svg>
                  
-                <span />
               </button>
             </li>
             <li>
               <button
                 aria-label="Logout"
-                class="sc-bdnyFh bxHnoO"
+                class="sc-bdnyFh olJWF"
-                iconstyle="[object Object]"
+                iconcolor="#000"
+                iconsize="23px"
               >
                 <svg
                   aria-hidden="true"
@@ -67,7 +68,6 @@ exports[`AppLayout Should render correctly 1`] = `
                   />
                 </svg>
                  
-                <span />
               </button>
             </li>
           </ul>
@@ -172,8 +172,9 @@ exports[`AppLayout Should render correctly 1`] = `
           <li>
             <button
               aria-label="Profile"
-              class="sc-bdnyFh bxHnoO"
+              class="sc-bdnyFh olJWF"
-              iconstyle="[object Object]"
+              iconcolor="#000"
+              iconsize="23px"
             >
               <svg
                 fill="currentColor"
@@ -192,14 +193,14 @@ exports[`AppLayout Should render correctly 1`] = `
                 />
               </svg>
                
-              <span />
             </button>
           </li>
           <li>
             <button
               aria-label="Logout"
-              class="sc-bdnyFh bxHnoO"
+              class="sc-bdnyFh olJWF"
-              iconstyle="[object Object]"
+              iconcolor="#000"
+              iconsize="23px"
             >
               <svg
                 aria-hidden="true"
@@ -218,7 +219,6 @@ exports[`AppLayout Should render correctly 1`] = `
                 />
               </svg>
                
-              <span />
             </button>
           </li>
         </ul>

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

@@ -1,19 +1,63 @@
 import { Outlet } from 'react-router-dom';
 
 // Components
-import Header from '@component/Header';
+import Header from '../Header';
-import Sidebar from '@component/Sidebar';
+import Sidebar from '../Sidebar';
 
 // Styled
 import { Main, StyledAppLayout } from './styled';
 
 // Hooks
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
+
+// Contexts
+import { initialState, reducer, UserRoomAvailableContext } from '@src/contexts/UserRoomAvailableContext.ts';
+import { useEffect, useReducer } from 'react';
+
+// Services
+import { getAllUsers } from '@src/services/userServices.ts';
+import { getAllRooms } from '@src/services/roomServices.ts';
 
 const AppLayout = () => {
   const { account } = useAccount();
 
+  const [{ usersAvailable, roomsAvailable }, dispatch] = useReducer(
+    reducer,
+    initialState
+  );
+
+  // Init list user and room available
+  // Init list user and room available
+  useEffect(() => {
+    const load = async () => {
+      const tempUser = await getAllUsers({
+        sortBy: 'id',
+        orderBy: 'asc',
+        phoneSearch: '',
+        page: 0,
+      });
+
+      if (tempUser) {
+        dispatch({ type: 'initUser', payload: tempUser.data });
+      }
+
+      const tempRoom = await getAllRooms({
+        sortBy: 'id',
+        orderBy: 'asc',
+        roomSearch: '',
+        page: 0,
+      });
+
+      if (tempRoom) {
+        dispatch({ type: 'initRoom', payload: tempRoom.data });
+      }
+    };
+
+    load();
+  }, []);
+
   return (
+    <UserRoomAvailableContext.Provider value={{usersAvailable, roomsAvailable, dispatch}}>
       <StyledAppLayout>
         <Header accountName={account?.user_metadata.fullName} />
         <Sidebar heading="Hotel Management" />
@@ -21,6 +65,7 @@ const AppLayout = () => {
           <Outlet />
         </Main>
       </StyledAppLayout>
+    </UserRoomAvailableContext.Provider>
   );
 };
 

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

@@ -9,7 +9,6 @@ describe('ButtonIcon', () => {
     <ButtonIcon
       aria-label="Logout"
       icon={<HiOutlineLogout />}
-      iconStyle={{ size: '23px' }}
     />
   );
 

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

@@ -6,8 +6,10 @@ exports[`ButtonIcon Should render correctly 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="sc-bdnyFh bxHnoO"
+        aria-label="Logout"
-        iconstyle="[object Object]"
+        class="sc-bdnyFh gPNQLR"
+        iconcolor="#000"
+        iconsize="16px"
       >
         <svg
           aria-hidden="true"
@@ -26,14 +28,15 @@ exports[`ButtonIcon Should render correctly 1`] = `
           />
         </svg>
          
-        <span />
       </button>
     </div>
   </body>,
   "container": <div>
     <button
-      class="sc-bdnyFh bxHnoO"
+      aria-label="Logout"
-      iconstyle="[object Object]"
+      class="sc-bdnyFh gPNQLR"
+      iconcolor="#000"
+      iconsize="16px"
     >
       <svg
         aria-hidden="true"
@@ -52,7 +55,6 @@ exports[`ButtonIcon Should render correctly 1`] = `
         />
       </svg>
        
-      <span />
     </button>
   </div>,
   "debug": [Function],

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

@@ -1,50 +1,35 @@
-import { ReactNode } from 'react';
+import { ButtonHTMLAttributes, ReactNode } from 'react';
 
 // Styled
 import { StyledButtonIcon } from './styled';
 
-interface IButtonIcon {
+interface IButtonIcon extends ButtonHTMLAttributes<HTMLButtonElement> {
   icon: ReactNode;
-  children?: ReactNode;
+  iconSize?: string;
-  style?: {
+  iconColor?: string;
   fontSize?: string;
-    backgroundColor?: string;
+  text?: string;
-    color?: string;
+  variations?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
-  onClick?: () => void;
-  disabled?: boolean;
-  label?: string;
 }
 
 const ButtonIcon = ({
   icon,
-  children,
+  iconSize,
-  style,
+  iconColor,
-  iconStyle,
+  text,
-  onClick,
+  fontSize,
-  disabled,
+  variations,
-  label,
+  ...props
 }: IButtonIcon) => {
-  const isHaveChildren = Boolean(children);
-
   return (
     <StyledButtonIcon
-      aria-label={label}
+      iconColor={iconColor}
-      isHaveChildren={isHaveChildren}
+      iconSize={iconSize}
-      style={{
+      fontSize={fontSize}
-        fontSize: style?.fontSize,
+      variations={variations}
-        backgroundColor: style?.backgroundColor,
+      {...props}
-        color: style?.color,
-      }}
-      iconStyle={iconStyle}
-      onClick={onClick}
-      disabled={disabled}
     >
-      {icon} <span>{children}</span>
+      {icon} {text && <span>{text}</span>}
     </StyledButtonIcon>
   );
 };

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

@@ -1,89 +1,104 @@
-import styled, { css } from 'styled-components';
+import styled, { css, RuleSet } from 'styled-components';
 
 interface IStyledButtonIcon {
-  isHaveChildren: boolean;
+  iconSize?: string;
-  style?: {
+  iconColor?: string;
   fontSize?: string;
-    backgroundColor?: string;
+  variations?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
 }
 
+export interface IVariations {
+  [key: string]: RuleSet<object>;
+}
+
+const variations: IVariations = {
+  success: css`
+    background-color: var(--success-btn-color);
+    color: var(--light-text);
+
+    &:hover {
+      background-color: var(--success-btn-hover-color);
+    }
+    
+    &:disabled {
+      background-color: var(--success-btn-hover-color);
+    }
+  `,
+  primary: css`
+    background-color: var(--primary-color);
+    color: var(--light-text);
+    
+    &:hover {
+      background-color: var(--primary-hover-color);
+    }
+  `,
+  danger: css`
+    background-color: var(--danger-btn-color);
+    color: var(--light-text);
+    
+    &:hover {
+      background-color: var(--danger-btn-hover-color);
+    }
+
+    &:disabled {
+      background-color: var(--danger-btn-hover-color);
+    }
+  `,
+  default: css`
+    &:hover {
+      background-color: var(--hover-background-color);
+    }
+  `,
+};
+
 const StyledButtonIcon = styled.button<IStyledButtonIcon>`
   background: none;
 
-  padding: 10px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  ${(props) =>
+    props.fontSize &&
+    css`
+      font-size: ${props.fontSize};
+    `}
+
+  padding: 10px 20px;
   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 {
+  &:disabled {
-    background-color: var(--hover-background-color);
+    cursor: not-allowed;
   }
 
+  ${(props) => variations[props.variations!]}
+
   & svg {
     ${(props) =>
-      props.iconStyle?.size &&
+      props.iconSize &&
       css`
-        width: ${props.iconStyle.size};
+        width: ${props.iconSize};
-        height: ${props.iconStyle.size};
+        height: ${props.iconSize};
       `}
 
     ${(props) =>
-      props.iconStyle?.color &&
+      props.iconColor &&
       css`
-        color: ${props.iconStyle.color};
+        color: ${props.iconColor};
       `}
+
     transition: all 0.3s;
   }
 `;
 
 StyledButtonIcon.defaultProps = {
-  style: {
+  iconSize: '16px',
-    fontSize: '14px',
+  iconColor: '#000',
-    backgroundColor: 'var(--primary-color)',
+  fontSize: 'var(--fs-sm-2x)',
-    color: '#000',
+  variations: 'default',
-  },
-  iconStyle: {
-    color: '#000',
-    size: '14px',
-  },
 };
 
 export { StyledButtonIcon };

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

@@ -4,7 +4,7 @@ import { memo, useCallback } from 'react';
 import { StyledConfirmDelete } from './styled';
 
 // Component
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 interface IConfirmMessage {
   message: string;

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

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import Form from '.';
 
 // Styled
-import Input from '@commonStyle/Input';
+import Input from '@src/commons/styles/Input';
 
 describe('Form ', () => {
   const isDisable = true;

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

@@ -11,7 +11,7 @@ import {
 } from './styled';
 
 // Types
-import { TDirection } from '@type/common';
+import { TDirection } from '@src/types/common';
 
 interface IFormProps {
   children: ReactNode;

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

@@ -1,14 +1,14 @@
 import styled, { css } from 'styled-components';
 
 // Types
-import { TDirection } from '@type/common';
+import { TDirection } from '@src/types/common';
 
 interface IStyledFormRow {
   direction?: TDirection;
 }
 
 // Styled
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 const StyledForm = styled.form`
   display: flex;

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

@@ -19,8 +19,9 @@ exports[`Header Should render correctly 1`] = `
           <li>
             <button
               aria-label="Profile"
-              class="sc-bdnyFh bxHnoO"
+              class="sc-bdnyFh olJWF"
-              iconstyle="[object Object]"
+              iconcolor="#000"
+              iconsize="23px"
             >
               <svg
                 fill="currentColor"
@@ -39,14 +40,14 @@ exports[`Header Should render correctly 1`] = `
                 />
               </svg>
                
-              <span />
             </button>
           </li>
           <li>
             <button
               aria-label="Logout"
-              class="sc-bdnyFh bxHnoO"
+              class="sc-bdnyFh olJWF"
-              iconstyle="[object Object]"
+              iconcolor="#000"
+              iconsize="23px"
             >
               <svg
                 aria-hidden="true"
@@ -65,7 +66,6 @@ exports[`Header Should render correctly 1`] = `
                 />
               </svg>
                
-              <span />
             </button>
           </li>
         </ul>
@@ -87,8 +87,9 @@ exports[`Header Should render correctly 1`] = `
         <li>
           <button
             aria-label="Profile"
-            class="sc-bdnyFh bxHnoO"
+            class="sc-bdnyFh olJWF"
-            iconstyle="[object Object]"
+            iconcolor="#000"
+            iconsize="23px"
           >
             <svg
               fill="currentColor"
@@ -107,14 +108,14 @@ exports[`Header Should render correctly 1`] = `
               />
             </svg>
              
-            <span />
           </button>
         </li>
         <li>
           <button
             aria-label="Logout"
-            class="sc-bdnyFh bxHnoO"
+            class="sc-bdnyFh olJWF"
-            iconstyle="[object Object]"
+            iconcolor="#000"
+            iconsize="23px"
           >
             <svg
               aria-hidden="true"
@@ -133,7 +134,6 @@ exports[`Header Should render correctly 1`] = `
               />
             </svg>
              
-            <span />
           </button>
         </li>
       </ul>

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

@@ -11,8 +11,9 @@ exports[`HeaderMenu Should render correctly 1`] = `
         <li>
           <button
             aria-label="Profile"
-            class="sc-bdnyFh bxHnoO"
+            class="sc-bdnyFh olJWF"
-            iconstyle="[object Object]"
+            iconcolor="#000"
+            iconsize="23px"
           >
             <svg
               fill="currentColor"
@@ -31,14 +32,14 @@ exports[`HeaderMenu Should render correctly 1`] = `
               />
             </svg>
              
-            <span />
           </button>
         </li>
         <li>
           <button
             aria-label="Logout"
-            class="sc-bdnyFh bxHnoO"
+            class="sc-bdnyFh olJWF"
-            iconstyle="[object Object]"
+            iconcolor="#000"
+            iconsize="23px"
           >
             <svg
               aria-hidden="true"
@@ -57,7 +58,6 @@ exports[`HeaderMenu Should render correctly 1`] = `
               />
             </svg>
              
-            <span />
           </button>
         </li>
       </ul>
@@ -70,8 +70,9 @@ exports[`HeaderMenu Should render correctly 1`] = `
       <li>
         <button
           aria-label="Profile"
-          class="sc-bdnyFh bxHnoO"
+          class="sc-bdnyFh olJWF"
-          iconstyle="[object Object]"
+          iconcolor="#000"
+          iconsize="23px"
         >
           <svg
             fill="currentColor"
@@ -90,14 +91,14 @@ exports[`HeaderMenu Should render correctly 1`] = `
             />
           </svg>
            
-          <span />
         </button>
       </li>
       <li>
         <button
           aria-label="Logout"
-          class="sc-bdnyFh bxHnoO"
+          class="sc-bdnyFh olJWF"
-          iconstyle="[object Object]"
+          iconcolor="#000"
+          iconsize="23px"
         >
           <svg
             aria-hidden="true"
@@ -116,7 +117,6 @@ exports[`HeaderMenu Should render correctly 1`] = `
             />
           </svg>
            
-          <span />
         </button>
       </li>
     </ul>

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

@@ -3,13 +3,13 @@ import { useNavigate } from 'react-router-dom';
 // Components
 import { IoPersonCircleOutline } from 'react-icons/io5';
 import { HiOutlineLogout } from 'react-icons/hi';
-import ButtonIcon from '@component/ButtonIcon';
+import ButtonIcon from '../ButtonIcon';
 
 // Styled
 import { StyledHeaderMenu } from './styled';
 
 // Hooks
-import { useLogout } from '@hook/authentication/useLogout';
+import { useLogout } from '@src/hooks/authentication/useLogout';
 
 const HeaderMenu = () => {
   const { logout, isPending } = useLogout();
@@ -19,19 +19,19 @@ const HeaderMenu = () => {
     <StyledHeaderMenu>
       <li>
         <ButtonIcon
-          label="Profile"
+          aria-label="Profile"
           icon={<IoPersonCircleOutline />}
-          iconStyle={{ size: '23px' }}
+          iconSize='23px'
           onClick={() => navigate('/account')}
         />
       </li>
       <li>
         <ButtonIcon
-          onClick={logout}
+          onClick={() => logout()}
           disabled={isPending}
-          label='Logout'
+          aria-label='Logout'
           icon={<HiOutlineLogout />}
-          iconStyle={{ size: '23px' }}
+          iconSize='23px'
         />
       </li>
     </StyledHeaderMenu>

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

@@ -17,12 +17,16 @@ describe('Menus', () => {
           <Menus.Toggle id={id} />
 
           <Menus.List id={id.toString()}>
-            <Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
+            <Menus.Button
-              Edit
+              onClick={handleOnClick}
-            </Menus.Button>
+              icon={<RiEditBoxFill />}
-            <Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
+              label="Edit"
-              Delete
+            />
-            </Menus.Button>
+            <Menus.Button
+              onClick={handleOnClick}
+              icon={<RiDeleteBin2Line />}
+              label="Delete"
+            />
           </Menus.List>
         </Menus.Menu>
       </Menus>

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

@@ -2,26 +2,22 @@ import { MouseEvent, ReactNode, useContext, useState } from 'react';
 
 // Components
 import { HiEllipsisVertical } from 'react-icons/hi2';
-import ButtonIcon from '@component/ButtonIcon';
+import ButtonIcon from '../ButtonIcon';
 
 // Hooks
-import { useOutsideClick } from '@hook/useOutsideClick';
+import { useOutsideClick } from '@src/hooks/useOutsideClick';
 
 // Styled
-import {
+import { StyledMenu, StyledList, StyledToggle } from './styled';
-  StyledMenu,
-  StyledList,
-  StyledToggle
-} from './styled';
 
 // Contexts
-import MenusContext from '@context/MenuContext';
+import MenusContext from '@src/contexts/MenuContext';
 
 // Types
-import { Nullable } from '@type/common';
+import { Nullable } from '@src/types/common';
 
 interface IButton {
-  children?: string;
+  label?: string;
   icon?: ReactNode;
   onClick?: () => void;
   disabled?: boolean;
@@ -46,17 +42,11 @@ const Menus = ({ children }: { children: ReactNode }) => {
 };
 
 const Toggle = ({ id }: { id: string }): ReactNode => {
-  const {
+  const { openId, close, open } = useContext(MenusContext);
-    openId,
-    close,
-    open
-  } = useContext(MenusContext);
   const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
-    openId !== id
+    openId !== id ? open!(id) : close!();
-      ? open!(id)
-      : close!();
   };
 
   return (
@@ -81,7 +71,7 @@ const List = ({
   return <StyledList ref={ref}>{children}</StyledList>;
 };
 
-const Button = ({ children, icon, onClick, disabled }: IButton): ReactNode => {
+const Button = ({ label, icon, onClick, disabled }: IButton): ReactNode => {
   const { close } = useContext(MenusContext);
   const handleClick = () => {
     onClick?.();
@@ -91,14 +81,13 @@ const Button = ({ children, icon, onClick, disabled }: IButton): ReactNode => {
   return (
     <li>
       <ButtonIcon
+        text={label}
+        aria-label={label}
         icon={icon}
+        iconColor='var(--primary-color)'
         onClick={handleClick}
-        iconStyle={{ color: 'var(--primary-color)', size: '19px' }}
-        style={{ fontSize: '16px' }}
         disabled={disabled}
-      >
+      />
-        {children}
-      </ButtonIcon>
     </li>
   );
 };

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

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react';
 
 // Components
 import Modal from '.';
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 describe('Modal', () => {
   const wrapper = render(
@@ -13,9 +13,11 @@ describe('Modal', () => {
           <Button onClick={onCloseModal}>Add room</Button>
         )}
       />
-      <Modal.Window name="room-form" title="Add form">
+      <Modal.Window
-        <p>This is a windows</p>
+        name="room-form"
-      </Modal.Window>
+        title="Add form"
+        renderChildren={(fn) => <p onClick={fn}>This is a windows</p>}
+      />
     </Modal>
   );
 

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

@@ -1,17 +1,15 @@
 import {
-  ReactElement,
   ReactNode,
-  cloneElement,
   useContext,
   useState,
 } from 'react';
 import { createPortal } from 'react-dom';
 
 // Hooks
-import { useOutsideClick } from '@hook/useOutsideClick';
+import { useOutsideClick } from '@src/hooks/useOutsideClick';
 
 // Contexts
-import { ModalContext } from '@context/ModalContext';
+import { ModalContext } from '@src/contexts/ModalContext';
 
 // Styled
 import { Overlay, StyledModal, StyledModalContent, TitleModal } from './styled';
@@ -34,7 +32,7 @@ const Modal = ({ children }: IModal) => {
 };
 
 interface IOpen {
-  renderChildren: (onCloseModal: () => void) => ReactNode;
+  renderChildren: (onOpenModal: () => void) => ReactNode;
   modalName: string;
 }
 
@@ -45,12 +43,12 @@ const Open = ({ renderChildren, modalName }: IOpen) => {
 };
 
 interface IWindow {
-  children: ReactElement;
+  renderChildren: (callBack: () => void) => ReactNode;
   name: string;
   title: string;
 }
 
-const Window = ({ children, name, title }: IWindow) => {
+const Window = ({ renderChildren, name, title }: IWindow) => {
   const { openName, close } = useContext(ModalContext);
   const ref = useOutsideClick<HTMLDivElement>(close!);
 
@@ -61,7 +59,7 @@ const Window = ({ children, name, title }: IWindow) => {
       <StyledModal ref={ref}>
         <StyledModalContent>
           <TitleModal>{title}</TitleModal>
-          {cloneElement(children, { onCloseModal: close })}
+          {renderChildren(close!)}
         </StyledModalContent>
       </StyledModal>
     </Overlay>,

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

@@ -1,4 +1,3 @@
-
 import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 

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

@@ -7,7 +7,7 @@ import { BsHouseDoorFill } from 'react-icons/bs';
 import { StyledNav, StyledNavLink } from './styled';
 
 // Constants
-import { BOOKING, ROOM, USER } from '@constant/path';
+import { BOOKING, ROOM, USER } from '@src/constants/path';
 
 const Nav = () => {
   return (

hotel-management/src/components/Pagination/__snapshots__/index.test.tsx.snap

@@ -12,10 +12,10 @@ exports[`Pagination Should render correctly 1`] = `
           Showing 
           1
            to 
-          5
+          10
            of 
           <span>
-            10
+            20
           </span>
            results
         </p>
@@ -84,10 +84,10 @@ exports[`Pagination Should render correctly 1`] = `
         Showing 
         1
          to 
-        5
+        10
          of 
         <span>
-          10
+          20
         </span>
          results
       </p>

hotel-management/src/components/Pagination/index.test.tsx

@@ -5,7 +5,7 @@ import { BrowserRouter } from 'react-router-dom';
 import Pagination from '.';
 
 describe('Pagination', () => {
-  const count = 10;
+  const count = 20;
   let wrapper: RenderResult | null = null;
 
   beforeEach(() => {

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

@@ -1,7 +1,7 @@
 import { useSearchParams } from 'react-router-dom';
 
 // Constants
-import { DEFAULT_PAGE_SIZE } from '@constant/config';
+import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
 
 // Styled
 import { Buttons, PaginationBtn, StyledPagination } from './styled';

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

@@ -1,11 +1,11 @@
 import { Outlet } from 'react-router-dom';
 
 // Styled
-import Spinner from '@commonStyle/Spinner';
+import Spinner from '@src/commons/styles/Spinner';
 import { FullPageLayout } from './styled';
 
 // Hooks
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
 
 const RootLayout = () => {
   const { isPending } = useAccount();

hotel-management/src/components/RouteProtected/index.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import RouteProtected from '.';
-import AppLayout from '@component/AppLayout';
+import AppLayout from '../AppLayout';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter } from 'react-router-dom';
 

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

@@ -1,4 +1,4 @@
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
 import { ReactNode } from 'react';
 import { Navigate } from 'react-router-dom';
 

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

@@ -9,7 +9,7 @@ jest.mock('react-router-dom', () => ({
   useSearchParams: jest.fn(),
 }));
 
-jest.mock('@hook/useDebounce', () => ({
+jest.mock('@src/hooks/useDebounce', () => ({
   useDebounce: jest.fn((value) => value),
 }));
 

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

@@ -5,10 +5,10 @@ import { useSearchParams } from 'react-router-dom';
 import { StyledSearch } from './styled';
 
 // Hooks
-import { useDebounce } from '@hook/useDebounce';
+import { useDebounce } from '@src/hooks/useDebounce';
 
 // Types
-import { Nullable } from '@type/common';
+import { Nullable } from '@src/types/common';
 
 interface ISearch {
   setPlaceHolder: string;
@@ -17,7 +17,12 @@ interface ISearch {
 const Search = ({ setPlaceHolder }: ISearch) => {
   const field = 'search';
   const [searchParams, setSearchParams] = useSearchParams();
-  const [query, setQuery] = useState<Nullable<string>>(null);
+  const [query, setQuery] = useState<Nullable<string>>(
+    searchParams.get(field)
+      ? searchParams.get(field)
+      : '',
+  );
+  
   const debounceValue = useDebounce<Nullable<string>>(query, 700);
 
   useEffect(() => {
@@ -32,6 +37,7 @@ const Search = ({ setPlaceHolder }: ISearch) => {
     <StyledSearch
       onChange={(e) => setQuery(e.target.value)}
       placeholder={setPlaceHolder}
+      value={query!}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 // Components
-import Nav from '@component/Nav';
+import Nav from '../Nav';
 
 // Styled
 import { Heading, StyledSidebar } from './styled';

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

@@ -2,7 +2,7 @@ import { useSearchParams } from 'react-router-dom';
 import { ChangeEvent, memo } from 'react';
 
 // Components
-import Select from '@component/Select';
+import Select from '../Select';
 
 interface ISortByProps {
   options: {

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

@@ -1,60 +0,0 @@
-import { render } from '@testing-library/react';
-
-// Components
-import Table from '.';
-
-// Types
-import { IUser } from '@type/user';
-
-interface ITableRow {
-  user: IUser;
-}
-
-describe('Table', () => {
-  const columnName = ['Column 1', 'Column 2'];
-  const tempUser: IUser[] = [
-    {
-      id: 1,
-      name: 'Nezumi',
-      phone: '123',
-      isBooked: true,
-      isDelete: true,
-    },
-    {
-      id: 2,
-      name: 'Loi Phan',
-      phone: '453',
-      isBooked: false,
-      isDelete: true,
-    },
-  ];
-  const TableRow = ({ user }: ITableRow) => {
-    const {
-      id,
-      name,
-      phone,
-      isBooked
-    } = user;
-
-    return (
-      <Table.Row>
-        <div>{id}</div>
-        <div>{name}</div>
-        <div>{phone}</div>
-        <div>{isBooked}</div>
-      </Table.Row>
-    );
-  };
-  const renderRow = (user: IUser) => <TableRow user={user} key={user.id} />;
-
-  const wrapper = render(
-    <Table columns="10% 35% 30% 15% 10%">
-      <Table.Header headerColumn={columnName} />
-      <Table.Body<IUser> data={tempUser} render={renderRow} />
-    </Table>
-  );
-
-  test('Should render correctly', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-});

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

@@ -1,70 +1,151 @@
-import { ReactNode, useContext } from 'react';
+// Types
+import {ColumnProps} from '@src/types/common';
 
 // Styled
 import {
   StyledBody,
+  StyledFooter,
   StyledHeader,
   StyledRow,
   StyledTable,
-  StyledFooter,
 } from './styled';
 
-// Contexts
+// Components
-import TableContext from '@context/TableContext';
+import Pagination from '../Pagination';
+import {TbArrowNarrowRight} from 'react-icons/tb';
+import {StyledTableOption} from '@src/pages/Room/styled.ts';
+import OrderBy from '@src/components/OrderBy';
+import {ORDERBY_OPTIONS} from '@src/constants/commons.ts';
+import SortBy from '@src/components/SortBy';
+import Search from '@src/components/Search';
+import Direction from '@src/commons/styles/Direction.ts';
+import {Dispatch, SetStateAction} from 'react';
 
-export interface ITable {
+const parseWidthString = (columnsWidth: number[]): string => {
-  columns?: string;
+  let result: string = '';
-  children: ReactNode;
-}
 
-export interface IHeader {
+  const totalWidth = columnsWidth.reduce((
-  headerColumn: string[];
+    partialSum,
-}
+    a
+  ) => partialSum + a, 0);
+  columnsWidth.forEach((width) => {
+    result += Math.round((
+      width / totalWidth
+    ) * 100)
+      .toString() + '% ';
+  });
 
-interface ITableBody<T> {
+  return result;
-  data?: T[];
-  render?: CallbackMapFunc<T>;
-}
-
-type CallbackMapFunc<T> = (value: T, index: number, array: T[]) => ReactNode;
-
-const Table = ({ columns, children }: ITable) => {
-  return (
-    <TableContext.Provider value={{ columns }}>
-      <StyledTable>{children}</StyledTable>
-    </TableContext.Provider>
-  );
 };
 
-const Header = ({ headerColumn }: IHeader) => {
+type Props<T> = {
-  const { columns } = useContext(TableContext);
+  columns: ColumnProps[];
+  rows: T[];
+  stateSelected: {
+    itemSelected: T | undefined;
+    setItemSelected: Dispatch<SetStateAction<T | undefined>>;
+  };
+  count?: number | null;
+  onRowClick?: (rowData: T) => void;
+  enabledOrder?: boolean;
+  sortBy?: {
+    value: string;
+    label: string;
+  }[];
+  searchPlaceHolder?: string;
+};
 
-  return (
+const Table = <T, >({
-    <StyledHeader columns={columns}>
+  rows,
-      {headerColumn.map((item) => (
+  columns,
-        <div key={item}>{item}</div>
+  count,
-      ))}
+  onRowClick,
-    </StyledHeader>
+  stateSelected,
-  );
+  sortBy,
+  searchPlaceHolder,
+  enabledOrder = false,
+}: Props<T>) => {
+  const width = parseWidthString(columns.map((item) => item.width));
+  const {itemSelected, setItemSelected} = stateSelected;
+
+  const headers = columns.map((
+    column,
+    index
+  ) => {
+    return <div key={`headCell-${index}`}>{column.title}</div>;
+  });
+
+  const renderRows = rows.map((
+    row,
+    rowIndex
+  ) => {
+    const handleRowClick = () => {
+      if (onRowClick) {
+        onRowClick(row);
+        setItemSelected(row);
+      }
     };
 
-const Body = <T,>({ data, render }: ITableBody<T>) => {
     return (
-    data!.length && (
+      <StyledRow
-      <StyledBody>{data?.map(render as CallbackMapFunc<T>)}</StyledBody>
+        key={`row-${rowIndex}`}
+        width={width}
+        onDoubleClick={handleRowClick}
+        className={
+          JSON.stringify(itemSelected) === JSON.stringify(row)
+            ? 'selected'
+            : ''
+        }
+      >
+        {columns.map((
+          column,
+          columnIndex
+        ) => {
+          const value = row[column.key as keyof typeof row] as string;
+
+          if (column.isDateValue) {
+            return (
+              <div
+                style={{display: 'flex', alignItems: 'center'}}
+                key={`cell-${columnIndex}`}
+              >
+                {value[0]} &nbsp; <TbArrowNarrowRight/>
+                &nbsp; {value[1]}
+              </div>
+            );
+          }
+
+          return <div key={`cell-${columnIndex}`}>{value}</div>;
+        })}
+      </StyledRow>
+    );
+  });
+
+  return (
+    <Direction>
+      <StyledTableOption>
+        {enabledOrder && <OrderBy options={ORDERBY_OPTIONS}/>}
+        {Boolean(sortBy?.length) && <SortBy options={sortBy!}/>}
+        {Boolean(searchPlaceHolder) && <Search setPlaceHolder={searchPlaceHolder!}/>}
+      </StyledTableOption>
+
+      {rows && rows.length &&
+        (
+          <StyledTable>
+            <StyledHeader width={width}>{headers}</StyledHeader>
+
+            <StyledBody>{renderRows}</StyledBody>
+
+            {Boolean(count) && (
+              <StyledFooter>
+                <Pagination count={count!}/>
+              </StyledFooter>
+            )}
+          </StyledTable>
         )
+      }
+    </Direction>
   );
-};
+}
-
-const Row = ({ children }: ITable) => {
-  const { columns } = useContext(TableContext);
-
-  return <StyledRow columns={columns}>{children}</StyledRow>;
-};
-
-Table.Header = Header;
-Table.Body = Body;
-Table.Row = Row;
-Table.Footer = StyledFooter;
 
 export default Table;

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

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
-// Interfaces
+interface ICommonRow {
-import { ITable } from '.';
+  width: string;
+}
 
 const StyledTable = styled.div`
   border: 1px solid var(--border-color);
@@ -10,9 +11,9 @@ const StyledTable = styled.div`
   font-size: 20px;
 `;
 
-const CommonRow = styled.div<ITable>`
+const CommonRow = styled.div<ICommonRow>`
   display: grid;
-  grid-template-columns: ${(props) => props.columns};
+  grid-template-columns: ${(props) => props.width};
   column-gap: 10px;
   align-items: center;
   justify-items: center;
@@ -25,6 +26,16 @@ const StyledBody = styled.div`
 const StyledRow = styled(CommonRow)`
   padding: 20px;
   
+  cursor: pointer;
+  
+  &:hover {
+    background-color: var(--item-hover);
+  }
+
+  &.selected {
+    background-color: var(--item-selected);
+  }
+
   &:not(:last-child) {
     border-bottom: 1px solid var(--border-color);
   }

hotel-management/src/contexts/ItemSelected.ts

@@ -0,0 +1,35 @@
+import { Dispatch, createContext } from 'react';
+
+export type TItemSelectAction = 'setData' | 'removeData';
+
+interface IAction<T> {
+  type: TItemSelectAction;
+  payload: T;
+}
+
+interface IItemSelect {
+  data?: any;
+  dispatch?: Dispatch<IAction<unknown>>;
+}
+
+const ItemSelectContext = createContext<IItemSelect>({});
+
+const itemSelectReducer =
+  <T>() =>
+  (state: T, action: IAction<T>) => {
+    switch (action.type) {
+      // Init data for the first load
+      case 'setData': {
+        const tempData = { ...state };
+
+        return {
+          data: tempData,
+        };
+      }
+
+      default:
+        throw new Error('Action unknown');
+    }
+  };
+
+export { itemSelectReducer, ItemSelectContext };

hotel-management/src/contexts/UserRoomAvailableContext.ts

@@ -1,7 +1,7 @@
 import { Dispatch, createContext } from 'react';
 
 // Types
-import { IDataState } from '@type/common';
+import { IDataState } from '@src/types/common';
 
 interface IUserRoomState {
   usersAvailable: IDataState[];

hotel-management/src/contexts/__tests__/userRoomAvailableContext.test.tsx

@@ -1,8 +1,8 @@
 // Contexts
-import { reducer } from '@context/UserRoomAvailableContext';
+import { reducer } from '../UserRoomAvailableContext';
 
 // Types
-import { IDataState } from '@type/common';
+import { IDataState } from '@src/types/common';
 
 describe('userRoomAvailableContext', () => {
   let initialState: {

hotel-management/src/helpers/__tests__/helpers.test.ts

@@ -1,5 +1,5 @@
 // Helpers
-import { formatCurrency, getDayDiff } from '@helper/helper';
+import { formatCurrency, getDayDiff } from '../helper';
 
 describe('formatCurrency', () => {
   test('Should format correctly', () => {

hotel-management/src/helpers/__tests__/validators.test.ts

@@ -1,5 +1,5 @@
 // Constants
-import { REGEX } from '@constant/commons';
+import { REGEX } from '@src/constants/commons';
 
 // Helpers
 import {
@@ -7,7 +7,7 @@ import {
   isValidDiscount,
   isValidRegex,
   isValidString,
-} from '@helper/validators';
+} from '../validators';
 
 describe('isValidPhone', () => {
   const isValidPhone = (phone: string) =>

hotel-management/src/helpers/helper.ts

@@ -29,7 +29,12 @@ const getDayDiff = (startDate: Date, endDate: Date): number => {
   return 0;
 }
 
+const findItemInListById = <T,>(id: number, listItem: T[]): T | undefined => {
+  return listItem.find((item) => item["id" as keyof typeof item] === id);
+}
+
 export {
   formatCurrency,
   getDayDiff,
+  findItemInListById,
 };

hotel-management/src/hooks/__tests__/useDebounce.test.tsx

@@ -2,7 +2,7 @@ import { act, fireEvent, render } from '@testing-library/react';
 import { useState } from 'react';
 
 // Hooks
-import { useDebounce } from '@hook/useDebounce';
+import { useDebounce } from '../useDebounce';
 
 jest.useFakeTimers();
 

hotel-management/src/hooks/__tests__/useOutsideClick.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, renderHook, screen } from '@testing-library/react';
 
 // Hooks
-import { useOutsideClick } from '@hook/useOutsideClick';
+import { useOutsideClick } from '../useOutsideClick';
 
 describe('useOutsideClick', () => {
   test('Call handler when click outside element', () => {

hotel-management/src/hooks/authentication/__tests__/useAccount.test.ts

@@ -3,7 +3,7 @@ import { renderHook } from '@testing-library/react';
 import { User } from '@supabase/supabase-js';
 
 // Services
-import * as authenticationService from '@service/authenticationService';
+import * as authenticationService from '@src/services/authenticationService';
 
 // Hooks
 import { useAccount } from '../useAccount';

hotel-management/src/hooks/authentication/useAccount.ts

@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 
 // Services
-import { getCurrentAccount } from '@service/authenticationService';
+import { getCurrentAccount } from '@src/services/authenticationService';
 
 /**
  * Get data of account currently login

hotel-management/src/hooks/authentication/useLogin.ts

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import toast from 'react-hot-toast';
 
 // Services
-import { login as loginFn } from '@service/authenticationService';
+import { login as loginFn } from '@src/services/authenticationService';
 
 /**
  * Login web

hotel-management/src/hooks/authentication/useLogout.ts

@@ -2,7 +2,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
 // Services
-import { logout as logoutFn } from '@service/authenticationService';
+import { logout as logoutFn } from '@src/services/authenticationService';
 
 /**
  * Logout web

hotel-management/src/hooks/authentication/useUpdateAccount.ts

@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'react-hot-toast';
 
 // Services
-import { updateAccount as updateAccountFn } from '@service/authenticationService';
+import { updateAccount as updateAccountFn } from '@src/services/authenticationService';
 
 // Constants
-import { UPDATE_ACCOUNT_SUCCESSFUL } from '@constant/messages';
+import { UPDATE_ACCOUNT_SUCCESSFUL } from '@src/constants/messages';
 
 /**
  * Update account currently login.

hotel-management/src/hooks/bookings/__tests__/useBookings.test.tsx

@@ -11,7 +11,7 @@ import { URLSearchParams } from 'url';
 import { useBookings } from '../useBookings';
 
 // Services
-import { getAllBookings } from '@service/bookingServices';
+import { getAllBookings } from '@src/services/bookingServices';
 
 jest.mock('react-router-dom', () => ({
   useSearchParams: jest.fn(),
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
 }));
 
-jest.mock('@service/bookingServices', () => ({
+jest.mock('@src/services/bookingServices', () => ({
   getAllBookings: jest.fn(),
 }));
 
@@ -67,7 +67,7 @@ describe('useBookings hook', () => {
   });
 
   test('Should prefetch the second page when in the first page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 7 };
+    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 11 };
 
     (queryClient.prefetchQuery as jest.Mock) = jest.fn();
     (useSearchParams as jest.Mock).mockReturnValue([
@@ -105,7 +105,7 @@ describe('useBookings hook', () => {
   });
 
   test('Should prefetch the previous page and next page when in the second page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 12 };
+    const sampleDate = { data: [{ id: 1, name: 'Booking 1' }], count: 22 };
 
     (useSearchParams as jest.Mock).mockReturnValue([
       new URLSearchParams('page=2'),

hotel-management/src/hooks/bookings/__tests__/useCheckout.test.tsx

@@ -8,13 +8,13 @@ import useCheckOut from '../useCheckout';
 import { act, renderHook } from '@testing-library/react';
 
 // Services
-import { checkOutBooking } from '@service/bookingServices';
+import { checkOutBooking } from '@src/services/bookingServices';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
 
 // Constants
-import { CHECKOUT_SUCCESS } from '@constant/messages';
+import { CHECKOUT_SUCCESS } from '@src/constants/messages';
 
 // Mock services and constants
 jest.mock('react-hot-toast');
@@ -22,10 +22,10 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/bookingServices', () => ({
+jest.mock('@src/services/bookingServices', () => ({
   checkOutBooking: jest.fn(),
 }));
-jest.mock('@hook/useUserRoomAvailable', () => ({
+jest.mock('@src/hooks/useUserRoomAvailable', () => ({
   useUserRoomAvailable: jest.fn(),
 }));
 

hotel-management/src/hooks/bookings/__tests__/useCreateBooking.test.tsx

@@ -11,20 +11,20 @@ import toast from 'react-hot-toast';
 import { useCreateBooking } from '../useCreateBooking';
 
 // Types
-import { IBooking } from '@type/booking';
+import { IBooking } from '@src/types/booking';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { createBooking } from '@service/bookingServices';
+import { createBooking } from '@src/services/bookingServices';
 
 // Mock the necessary dependencies
 jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/bookingServices', () => ({
+jest.mock('@src/services/bookingServices', () => ({
   createBooking: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/bookings/__tests__/useUpdateBooking.test.tsx

@@ -8,13 +8,13 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IBooking } from '@type/booking';
+import { IBooking } from '@src/types/booking';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { updateBooking } from '@service/bookingServices';
+import { updateBooking } from '@src/services/bookingServices';
 
 // Hooks
 import { useUpdateBooking } from '../useUpdateBooking';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/bookingServices', () => ({
+jest.mock('@src/services/bookingServices', () => ({
   updateBooking: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/bookings/useBookings.ts

@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllBookings } from '@service/bookingServices';
+import { getAllBookings } from '@src/services/bookingServices';
 
 // Constants
-import { DEFAULT_PAGE_SIZE } from '@constant/config';
+import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
 
 /**
  * Fetch booking from database

hotel-management/src/hooks/bookings/useCheckout.ts

@@ -2,13 +2,13 @@ import toast from 'react-hot-toast';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 // Constants
-import { CHECKOUT_SUCCESS } from '@constant/messages';
+import { CHECKOUT_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 // Services
-import { checkOutBooking as checkOutBookingFn } from '@service/bookingServices';
+import { checkOutBooking as checkOutBookingFn } from '@src/services/bookingServices';
 
 const useCheckOut = () => {
   const queryClient = useQueryClient();

hotel-management/src/hooks/bookings/useCreateBooking.ts

@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { createBooking as createBookingFn } from '@service/bookingServices';
+import { createBooking as createBookingFn} from '@src/services/bookingServices';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 /**
  * Create booking on database

hotel-management/src/hooks/bookings/useUpdateBooking.ts

@@ -2,10 +2,10 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { updateBooking as updateBookingFn } from '@service/bookingServices';
+import { updateBooking as updateBookingFn } from '@src/services/bookingServices';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 /**
  * Update booking from database

hotel-management/src/hooks/rooms/__tests__/useCreateRoom.test.tsx

@@ -8,22 +8,22 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Hooks
 import { useCreateRoom } from '../useCreateRoom';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { createRoom } from '@service/roomServices';
+import { createRoom } from '@src/services/roomServices';
 
 jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/roomServices', () => ({
+jest.mock('@src/services/roomServices', () => ({
   createRoom: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/rooms/__tests__/useRooms.test.tsx

@@ -8,7 +8,7 @@ import { renderHook } from '@testing-library/react';
 import { URLSearchParams } from 'url';
 
 // Services
-import { getAllRooms } from '@service/roomServices';
+import { getAllRooms } from '@src/services/roomServices';
 
 // Hooks
 import { useRooms } from '../useRooms';
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
 }));
 
-jest.mock('@service/roomServices', () => ({
+jest.mock('@src/services/roomServices', () => ({
   getAllRooms: jest.fn(),
 }));
 
@@ -69,7 +69,7 @@ describe('useRooms hook', () => {
   });
 
   test('Should prefetch the second page when in the first page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 7 };
+    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 11 };
 
     (useSearchParams as jest.Mock).mockReturnValue([
       new URLSearchParams('page=1'),
@@ -106,7 +106,7 @@ describe('useRooms hook', () => {
   });
 
   test('Should prefetch the previous page and next page when in the second page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 12 };
+    const sampleDate = { data: [{ id: 1, name: 'Room 1' }], count: 22 };
 
     (useSearchParams as jest.Mock).mockReturnValue([
       new URLSearchParams('page=2'),

hotel-management/src/hooks/rooms/__tests__/useSetIsDeleteRoom.test.tsx

@@ -8,13 +8,13 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Constants
-import { DELETE_SUCCESS } from '@constant/messages';
+import { DELETE_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { setIsDeleteRoom } from '@service/roomServices';
+import { setIsDeleteRoom } from '@src/services/roomServices';
 
 // Hooks
 import { useSetIsDeleteRoom } from '../useSetIsDeleteRoom';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/roomServices', () => ({
+jest.mock('@src/services/roomServices', () => ({
   setIsDeleteRoom: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/rooms/__tests__/useUpdateRoom.test.tsx

@@ -8,13 +8,13 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { updateRoom } from '@service/roomServices';
+import { updateRoom } from '@src/services/roomServices';
 
 // Hooks
 import { useUpdateRoom } from '../useUpdateRoom';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/roomServices', () => ({
+jest.mock('@src/services/roomServices', () => ({
   updateRoom: jest.fn(),
 }));
 jest.mock('react-hot-toast');

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

@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { createRoom as createRoomFn } from '@service/roomServices';
+import { createRoom as createRoomFn} from '@src/services/roomServices';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Create room on database

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

@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllRooms } from '@service/roomServices';
+import { getAllRooms } from '@src/services/roomServices';
 
 // Constants
-import { DEFAULT_PAGE_SIZE } from '@constant/config';
+import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
 
 /**
  * Fetch room from database

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

@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { setIsDeleteRoom as setIsDeleteRoomFn } from '@service/roomServices';
+import { setIsDeleteRoom as setIsDeleteRoomFn } from '@src/services/roomServices';
 
 // Constants
-import * as messages from '@constant/messages';
+import { DELETE_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Delete the room from database
@@ -25,7 +25,7 @@ const useSetIsDeleteRoom = () => {
   } = useMutation({
     mutationFn: setIsDeleteRoomFn,
     onSuccess: (room) => {
-      toast.success(messages.DELETE_SUCCESS);
+      toast.success(DELETE_SUCCESS);
       queryClient.invalidateQueries({
         queryKey: ['rooms'],
       });

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

@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { updateRoom as updateRoomFn } from '@service/roomServices';
+import { updateRoom as updateRoomFn } from '@src/services/roomServices';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Update room from database

hotel-management/src/hooks/useItemSelected.ts

@@ -0,0 +1,22 @@
+import { useContext } from 'react';
+
+// Contexts
+import { ItemSelectContext } from '@src/contexts/ItemSelected';
+
+/**
+ * The hooks check the place call is in UserRoomAvailableProvider or not
+ * @returns The context of UserRoomAvailableContext
+ */
+const useItemSelect = () => {
+  const context = useContext(ItemSelectContext);
+
+  if (context === undefined) {
+    throw new Error(
+      'ItemSelectContext was used outside of ItemSelectContextProvider'
+    );
+  }
+
+  return context;
+};
+
+export { useItemSelect };

hotel-management/src/hooks/useOutsideClick.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject, useEffect, useRef } from 'react';
 
 // Types
-import { Nullable } from '@type/common';
+import { Nullable } from '@src/types/common';
 
 /**
  * Custom hook to call handler when click outside element

hotel-management/src/hooks/useUserRoomAvailable.ts

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 
 // Contexts
-import { UserRoomAvailableContext } from '@context/UserRoomAvailableContext';
+import { UserRoomAvailableContext } from '@src/contexts/UserRoomAvailableContext';
 
 /**
  * The hooks check the place call is in UserRoomAvailableProvider or not

hotel-management/src/hooks/users/__tests__/useCreateUser.test.tsx

@@ -11,20 +11,20 @@ import { ReactNode } from 'react';
 import { useCreateUser } from '../useCreateUser';
 
 // Types
-import { IUser } from '@type/user';
+import { IUser } from '@src/types/user';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { createUser } from '@service/userServices';
+import { createUser } from '@src/services/userServices';
 
 // Mock the necessary dependencies
 jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/userServices', () => ({
+jest.mock('@src/services/userServices', () => ({
   createUser: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/users/__tests__/useSetIsDeleteUser.test.tsx

@@ -8,13 +8,13 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IUser } from '@type/user';
+import { IUser } from '@src/types/user';
 
 // Constants
-import { DELETE_SUCCESS } from '@constant/messages';
+import { DELETE_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { setIsDeleteUser } from '@service/userServices';
+import { setIsDeleteUser } from '@src/services/userServices';
 
 // Hooks
 import { useIsDeleteUser } from '../useSetIsDeleteUser';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/userServices', () => ({
+jest.mock('@src/services/userServices', () => ({
   setIsDeleteUser: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/users/__tests__/useUpdateUser.test.tsx

@@ -8,13 +8,13 @@ import {
 import { ReactNode } from 'react';
 
 // Types
-import { IUser } from '@type/user';
+import { IUser } from '@src/types/user';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 // Services
-import { updateUser } from '@service/userServices';
+import { updateUser } from '@src/services/userServices';
 
 // Hooks
 import { useUpdateUser } from '../useUpdateUser';
@@ -24,7 +24,7 @@ jest.mock('@tanstack/react-query', () => ({
   ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
-jest.mock('@service/userServices', () => ({
+jest.mock('@src/services/userServices', () => ({
   updateUser: jest.fn(),
 }));
 jest.mock('react-hot-toast');

hotel-management/src/hooks/users/__tests__/useUsers.test.tsx

@@ -8,7 +8,7 @@ import { renderHook } from '@testing-library/react';
 import { URLSearchParams } from 'url';
 
 // Services
-import { getAllUsers } from '@service/userServices';
+import { getAllUsers } from '@src/services/userServices';
 
 // Hooks
 import { useUsers } from '../useUsers';
@@ -22,7 +22,7 @@ jest.mock('@tanstack/react-query', () => ({
   useQuery: jest.fn(),
 }));
 
-jest.mock('@service/userServices', () => ({
+jest.mock('@src/services/userServices', () => ({
   getAllUsers: jest.fn(),
 }));
 
@@ -69,7 +69,7 @@ describe('useUsers hook', () => {
   });
 
   test('Should prefetch the second page when in the first page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 7 };
+    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 11 };
 
     (useSearchParams as jest.Mock).mockReturnValue([
       new URLSearchParams('page=1'),
@@ -106,7 +106,7 @@ describe('useUsers hook', () => {
   });
 
   test('Should prefetch the previous page and next page when in the second page', async () => {
-    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 12 };
+    const sampleDate = { data: [{ id: 1, name: 'User 1' }], count: 22 };
 
     (useSearchParams as jest.Mock).mockReturnValue([
       new URLSearchParams('page=2'),

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

@@ -2,13 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { createUser as createUserFn } from '@service/userServices';
+import { createUser as createUserFn } from '@src/services/userServices';
 
 // Constants
-import { ADD_SUCCESS } from '@constant/messages';
+import { ADD_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Create user in database

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

@@ -2,11 +2,13 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import toast from 'react-hot-toast';
 
 // Services
-import { setIsDeleteUser as setIsDeleteUserFn } from '@service/userServices';
+import { setIsDeleteUser as setIsDeleteUserFn } from '@src/services/userServices';
 
 // Constants
-import * as messages from '@constant/messages';
+import { DELETE_SUCCESS } from '@src/constants/messages';
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+
+// Hooks
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Delete the user from database
@@ -23,7 +25,7 @@ const useIsDeleteUser = () => {
   } = useMutation({
     mutationFn: setIsDeleteUserFn,
     onSuccess: (user) => {
-      toast.success(messages.DELETE_SUCCESS);
+      toast.success(DELETE_SUCCESS);
       queryClient.invalidateQueries({
         queryKey: ['users'],
       });

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

@@ -2,13 +2,13 @@ import toast from 'react-hot-toast';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 // Services
-import { updateUser as updateUserFn } from '@service/userServices';
+import { updateUser as updateUserFn } from '@src/services/userServices';
 
 // Constants
-import { UPDATE_SUCCESS } from '@constant/messages';
+import { UPDATE_SUCCESS } from '@src/constants/messages';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '../useUserRoomAvailable';
 
 /**
  * Update user from database

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

@@ -3,10 +3,10 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 
 // Services
-import { getAllUsers } from '@service/userServices';
+import { getAllUsers } from '@src/services/userServices';
 
 // Constants
-import { DEFAULT_PAGE_SIZE } from '@constant/config';
+import { DEFAULT_PAGE_SIZE } from '@src/constants/config';
 
 /**
  * Fetch data of users from database

hotel-management/src/pages/Account/AccountInforForm.tsx

@@ -1,17 +1,17 @@
 import { useForm } from 'react-hook-form';
 
 // Styled
-import Input from '@commonStyle/Input';
+import Input from '@src/commons/styles/Input';
 
 // Components
-import Form from '@component/Form';
+import Form from '@src/components/Form';
 
 // Constants
-import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage';
+import { REQUIRED_FIELD_ERROR } from '@src/constants/formValidateMessage';
 
 // Hooks
-import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
 
 interface IAccountForm {
   fullName: string;

hotel-management/src/pages/Account/AccountPasswordForm.tsx

@@ -3,24 +3,24 @@ import { useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 
 // Styled
-import Input from '@commonStyle/Input';
+import Input from '@src/commons/styles/Input';
 
 // Components
-import Form from '@component/Form';
+import Form from '@src/components/Form';
 
 // Constants
-import { REGEX } from '@constant/commons';
+import { REGEX } from '@src/constants/commons';
 import {
   PASSWORD_CONDITION,
   PASSWORD_NOT_MATCH,
   PASSWORD_NOT_MATCH_REQUIREMENT,
-} from '@constant/formValidateMessage';
+} from '@src/constants/formValidateMessage';
 
 // Helpers
-import { isValidRegex } from '@helper/validators';
+import { isValidRegex } from '@src/helpers/validators';
 
 // Hooks
-import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
 
 interface IAccountPasswordForm {
   password: string;

hotel-management/src/pages/Account/__tests__/AccountInforForm.test.tsx

@@ -2,14 +2,14 @@ import { act, fireEvent, render, RenderResult, waitFor } from '@testing-library/
 import '@testing-library/jest-dom';
 
 // Components
-import AccountInforForm from '@page/Account/AccountInforForm';
+import AccountInforForm from '@src/pages/Account/AccountInforForm';
 
 // Hooks
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
-import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
 
-jest.mock('@hook/authentication/useUpdateAccount');
+jest.mock('@src/hooks/authentication/useUpdateAccount');
-jest.mock('@hook/authentication/useAccount');
+jest.mock('@src/hooks/authentication/useAccount');
 
 const mockAccount = {
   email: 'admin@nezumi.site',

hotel-management/src/pages/Account/__tests__/AccountPasswordForm.test.tsx

@@ -10,9 +10,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import AccountPasswordForm from '../AccountPasswordForm';
 
 // Hooks
-import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
 
-jest.mock('@hook/authentication/useUpdateAccount');
+jest.mock('@src/hooks/authentication/useUpdateAccount');
 
 describe('AccountPasswordForm', () => {
   let wrapper: RenderResult | null = null;

hotel-management/src/pages/Booking/BookingForm.tsx

@@ -2,29 +2,29 @@ import { useCallback, useMemo, useState } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
 // Styled
-import Input from '@commonStyle/Input.ts';
+import Input from '@src/commons/styles/Input';
 
 // Constants
-import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage.ts';
+import { REQUIRED_FIELD_ERROR } from '@src/constants/formValidateMessage';
 
 // Components
-import Form from '@component/Form/index.tsx';
+import Form from '@src/components/Form';
-import Select, { ISelectOptions } from '@component/Select/index.tsx';
+import Select, { ISelectOptions } from '@src/components/Select/index.tsx';
 
 // Hooks
-import { useCreateBooking } from '@hook/bookings/useCreateBooking.ts';
+import { useCreateBooking } from '@src/hooks/bookings/useCreateBooking';
-import { useUpdateBooking } from '@hook/bookings/useUpdateBooking.ts';
+import { useUpdateBooking } from '@src/hooks/bookings/useUpdateBooking';
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable.ts';
+import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
 
 // Helpers
-import { formatCurrency, getDayDiff } from '@helper/helper.ts';
+import { formatCurrency, getDayDiff } from '@src/helpers/helper';
 
 // Services
-import { getRoomById, updateRoomStatus } from '@service/roomServices.ts';
+import { getRoomById, updateRoomStatus } from '@src/services/roomServices';
-import { updateUserBookedStatus } from '@service/userServices.ts';
+import { updateUserBookedStatus } from '@src/services/userServices';
 
 // Types
-import { IBooking, TBookingResponse } from '@type/booking.ts';
+import { IBooking, TBookingResponse } from '@src/types/booking';
 
 interface IBookingFormProp {
   onCloseModal?: () => void;
@@ -37,6 +37,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
     usersAvailable,
     dispatch
   } = useUserRoomAvailable();
+  
   const { isCreating, createBooking } = useCreateBooking();
   const { isUpdating, updateBooking } = useUpdateBooking();
   const isLoading = isCreating || isUpdating;

hotel-management/src/pages/Booking/BookingRow.tsx

@@ -1,129 +0,0 @@
-import toast from 'react-hot-toast';
-import { useCallback, useMemo } from 'react';
-
-// Helpers
-import { formatCurrency } from '@helper/helper';
-
-// Types
-import { TBookingResponse } from '@type/booking';
-
-// Components
-import Modal from '@component/Modal';
-import Table from '@component/Table';
-import Menus from '@component/Menus';
-import { RiEditBoxFill } from 'react-icons/ri';
-import { TbArrowNarrowRight } from 'react-icons/tb';
-import { ImExit } from 'react-icons/im';
-import BookingForm from './BookingForm';
-import ConfirmMessage from '@component/ConfirmMessage';
-
-// Hooks
-import useCheckOut from '@hook/bookings/useCheckout';
-
-// Constants
-import { FORM } from '@constant/commons';
-
-interface IBookingRow {
-  booking: TBookingResponse;
-}
-
-const BookingRow = ({ booking }: IBookingRow) => {
-  const { checkOutBooking } = useCheckOut();
-  const {
-    id,
-    users,
-    startDate,
-    endDate,
-    rooms,
-    amount,
-    status
-  } = booking;
-  const formattedPrice = useMemo(() => formatCurrency(amount), [amount]);
-  const renderEditBtn = useCallback(
-    (onCloseModal: () => void) => (
-      <Menus.Button
-        onClick={onCloseModal}
-        icon={<RiEditBoxFill />}
-        disabled={!status}
-      >
-        Edit
-      </Menus.Button>
-    ),
-    [status]
-  );
-
-  const renderCheckOutBtn = useCallback(
-    (onCloseModal: () => void) => (
-      <Menus.Button 
-        onClick={onCloseModal}
-        icon={<ImExit />}
-        disabled={!status}
-      >
-        Checkout
-      </Menus.Button>
-    ),
-    [status]
-  );
-
-  const handleClickCheckOutBtn = useCallback(() => {
-    if (booking.status) {
-      checkOutBooking({
-        idBooking: booking.id,
-        roomId: booking!.rooms!.id,
-        userId: booking!.users!.id,
-      });
-    } else {
-      toast.error('User already checkout!');
-    }
-  }, [booking, checkOutBooking]);
-
-  return (
-    <Table.Row>
-      <div>{users?.name}</div>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        {startDate} &nbsp; <TbArrowNarrowRight />
-        &nbsp; {endDate}
-      </div>
-      <div>{rooms?.name}</div>
-      <div>{formattedPrice}</div>
-      <div>{
-          status
-            ? 'Check in'
-            : 'Check out'
-        }</div>
-
-      <div>
-        <Modal>
-          <Menus.Menu>
-            <Menus.Toggle id={id.toString()} />
-
-            <Menus.List id={id.toString()}>
-              <Modal.Open
-                modalName={FORM.EDIT}
-                renderChildren={renderEditBtn}
-              />
-
-              <Modal.Open
-                modalName={FORM.CHECKOUT}
-                renderChildren={renderCheckOutBtn}
-              />
-            </Menus.List>
-
-            <Modal.Window name={FORM.EDIT} title="Edit Booking">
-              <BookingForm booking={booking} key={booking.id} />
-            </Modal.Window>
-
-            <Modal.Window name={FORM.CHECKOUT} title="Checkout">
-              <ConfirmMessage
-                message={`Are you sure to checkout this user? '${booking.users?.name}'`}
-                onConfirm={handleClickCheckOutBtn}
-              />
-            </Modal.Window>
-          </Menus.Menu>
-        </Modal>
-      </div>
-    </Table.Row>
-  );
-};
-
-export default BookingRow;

hotel-management/src/pages/Booking/BookingTable.tsx

@@ -1,73 +0,0 @@
-import { useCallback } from 'react';
-
-// Components
-import Menus from '@component/Menus';
-import Table from '@component/Table';
-import Message from '@component/Message';
-import Search from '@component/Search';
-import Pagination from '@component/Pagination';
-import BookingRow from './BookingRow';
-
-// Styled
-import { StyledOperationTable } from './styled';
-import Direction from '@commonStyle/Direction';
-import Spinner from '@commonStyle/Spinner';
-
-// Hooks
-import { useBookings } from '@hook/bookings/useBookings';
-
-// Types
-import { TBookingResponse } from '@type/booking';
-
-const BookingTable = () => {
-  const columnName = [
-    'User',
-    'Date',
-    'Room',
-    'Amount',
-    'Status'
-  ];
-  const { 
-    isLoading,
-    bookings,
-    count
-  } = useBookings();
-
-  const renderBookingRow = useCallback(
-    (booking: TBookingResponse) => (
-      <BookingRow booking={booking} key={booking.id} />
-    ),
-    []
-  );
-
-  return (
-    <>
-      <Direction>
-        <StyledOperationTable>
-          <Search setPlaceHolder="Search by name..." />
-        </StyledOperationTable>
-
-        {isLoading && <Spinner />}
-
-        {bookings && bookings.length ? (
-          <Menus>
-            <Table columns="15% 25% 20% 15% 10% 10% 5%">
-              <Table.Header headerColumn={columnName} />
-              <Table.Body<TBookingResponse>
-                data={bookings}
-                render={renderBookingRow}
-              />
-              <Table.Footer>
-                <Pagination count={count!} />
-              </Table.Footer>
-            </Table>
-          </Menus>
-        ) : (
-          !isLoading && <Message>No data to show here!</Message>
-        )}
-      </Direction>
-    </>
-  );
-};
-
-export default BookingTable;

hotel-management/src/pages/Booking/__tests__/BookingForm.test.tsx

@@ -8,25 +8,25 @@ import {
 } from '@testing-library/react';
 
 // Types
-import { TBookingResponse } from '@type/booking';
+import { TBookingResponse } from '@src/types/booking';
 
 // Components
 import BookingForm from '../BookingForm';
 
 // Hooks
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { useUserRoomAvailable } from '@src/hooks/useUserRoomAvailable';
 
 const mockUpdateBooking = jest.fn();
 
-jest.mock('@hook/bookings/useUpdateBooking', () => ({
+jest.mock('@src/hooks/bookings/useUpdateBooking', () => ({
-  ...jest.requireActual('@hook/bookings/useUpdateBooking'),
+  ...jest.requireActual('@src/hooks/bookings/useUpdateBooking'),
   useUpdateBooking: jest.fn(() => ({
     isUpdating: false,
     updateBooking: mockUpdateBooking,
   })),
 }));
 
-jest.mock('@hook/useUserRoomAvailable.ts');
+jest.mock('@src/hooks/useUserRoomAvailable.ts');
 
 const mockUseUserRoomAvailable = useUserRoomAvailable as jest.MockedFunction<
   typeof useUserRoomAvailable

hotel-management/src/pages/Booking/__tests__/BookingRow.test.tsx

@@ -1,37 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render } from '@testing-library/react';
-
-// Types
-import { TBookingResponse } from '@type/booking';
-
-// Components
-import BookingRow from '../BookingRow';
-
-describe('BookingRow', () => {
-  const tempBooking: TBookingResponse = {
-    id: 1,
-    startDate: '2024-11-21',
-    endDate: '2024-11-22',
-    amount: 1200,
-    status: true,
-    rooms: {
-      id: 1,
-      name: 'Room 1',
-    },
-    users: {
-      id: 2,
-      name: 'Room 2',
-    },
-  };
-
-  const queryClient = new QueryClient();
-  const wrapper = render(
-    <QueryClientProvider client={queryClient}>
-      <BookingRow booking={tempBooking} />
-    </QueryClientProvider>
-  );
-
-  test('Should render correctly', () => {
-    expect(wrapper).toMatchSnapshot();
-  });
-});

hotel-management/src/pages/Booking/__tests__/BookingTable.test.tsx

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

hotel-management/src/pages/Booking/__tests__/__snapshots__/BookingForm.test.tsx.snap

@@ -79,7 +79,7 @@ exports[`BookingForm Should render correctly 1`] = `
             <input
               class="sc-bdnyFh gXSWSo"
               id="startDate"
-              min="2023-12-04"
+              min="2023-12-06"
               name="startDate"
               type="date"
             />
@@ -223,7 +223,7 @@ exports[`BookingForm Should render correctly 1`] = `
           <input
             class="sc-bdnyFh gXSWSo"
             id="startDate"
-            min="2023-12-04"
+            min="2023-12-06"
             name="startDate"
             type="date"
           />

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

@@ -1,36 +1,209 @@
-// Styled
-import Direction from '@commonStyle/Direction';
-import { StyledBooking, Title } from './styled';
-import Button from '@commonStyle/Button';
-
 // Components
-import Modal from '@component/Modal';
-import BookingTable from './BookingTable';
 import BookingForm from './BookingForm';
+import Modal from '@src/components/Modal';
+import ButtonIcon from '@src/components/ButtonIcon';
+import Direction from '@src/commons/styles/Direction';
+import {FiEdit} from 'react-icons/fi';
+import {MdOutlineAddCircleOutline} from 'react-icons/md';
+import Table from '@src/components/Table';
 
-// Constants
+// Styled
-import { FORM } from '@constant/commons';
+import {ActionTable, StyledBooking, Title} from './styled';
+import Spinner from '@src/commons/styles/Spinner.ts';
+
+// Types
+import {ColumnProps} from '@src/types/common.ts';
+import {TBookingResponse} from '@src/types/booking.ts';
+
+// Hooks
+import {useBookings} from '@src/hooks/bookings/useBookings.ts';
+import {useEffect, useState} from 'react';
+import {FORM} from '@src/constants/commons.ts';
+import {findItemInListById, formatCurrency} from '@src/helpers/helper.ts';
+import ConfirmMessage from '@src/components/ConfirmMessage';
+import useCheckOut from '@src/hooks/bookings/useCheckout.ts';
+import toast from 'react-hot-toast';
+import {ImExit} from "react-icons/im";
+import Message from "@src/components/Message";
+
+interface IBookingTable extends Omit<TBookingResponse, 'status' | 'amount'> {
+  amount: string;
+  status: string;
+}
 
 const Booking = () => {
+  const {checkOutBooking} = useCheckOut();
+  const [itemSelected, setItemSelected] = useState<IBookingTable>();
+  let bookingSelected: TBookingResponse | undefined;
+
+  const columns: ColumnProps[] = [
+    {
+      key: 'user',
+      title: 'User',
+      width: 10
+    },
+    {
+      key: 'date',
+      title: 'Date',
+      width: 25,
+      isDateValue: true
+    },
+    {
+      key: 'room',
+      title: 'Room',
+      width: 20
+    },
+    {
+      key: 'amount',
+      title: 'Amount',
+      width: 15
+    },
+    {
+      key: 'status',
+      title: 'Status',
+      width: 20
+    }
+  ];
+  const {isLoading, bookings, count} = useBookings();
+
+  // Reset value when bookings changed.
+  useEffect(() => {
+    setItemSelected(undefined);
+  }, [bookings]);
+
+  const tempBookings = bookings?.map((booking) => (
+    {
+      ...booking,
+      date: [booking.startDate, booking.endDate],
+      amount: formatCurrency(booking.amount),
+      room: booking.rooms!.name,
+      user: booking.users!.name,
+      status: booking.status
+        ? 'Check in'
+        : 'Check out',
+    }
+  ));
+
+  if (itemSelected && bookings) {
+    bookingSelected = findItemInListById<TBookingResponse>(itemSelected.id, bookings);
+  }
+
+  const handleClickCheckOutBtn = () => {
+    if (itemSelected && itemSelected.status) {
+      checkOutBooking({
+        idBooking: itemSelected.id,
+        roomId: itemSelected!.rooms!.id,
+        userId: itemSelected!.users!.id
+      });
+    } else {
+      toast.error('User already checkout!');
+    }
+  };
+
   return (
     <StyledBooking>
       <Direction type="horizontal">
         <Title>List Booking</Title>
 
         <Modal>
+          <ActionTable>
             <Modal.Open
-            modalName={FORM.BOOKING}
+              modalName={FORM.ROOM}
               renderChildren={(onCloseModal) => (
-              <Button onClick={onCloseModal}>Add booking</Button>
+                <ButtonIcon
+                  icon={<MdOutlineAddCircleOutline/>}
+                  text={'Add Booking'}
+                  iconSize={'18px'}
+                  fontSize={'var(--fs-sm)'}
+                  variations={'primary'}
+                  iconColor={'white'}
+                  onClick={onCloseModal}
+                />
               )}
             />
-          <Modal.Window name={FORM.BOOKING} title="Add form">
+
-            <BookingForm />
+            <Modal.Open
-          </Modal.Window>
+              modalName={FORM.EDIT}
+              renderChildren={(onCloseModal) => (
+                <ButtonIcon
+                  icon={<FiEdit/>}
+                  text={'Edit'}
+                  iconSize={'18px'}
+                  fontSize={'var(--fs-sm)'}
+                  variations={'success'}
+                  iconColor={'white'}
+                  disabled={!itemSelected || itemSelected?.status === 'Check out'}
+                  onClick={onCloseModal}
+                />
+              )}
+            />
+
+            <Modal.Open
+              modalName={FORM.CHECKOUT}
+              renderChildren={(onCloseModal) => (
+                <ButtonIcon
+                  icon={<ImExit />}
+                  text={'Check out'}
+                  iconSize={'18px'}
+                  fontSize={'var(--fs-sm)'}
+                  variations={'danger'}
+                  iconColor={'white'}
+                  disabled={!itemSelected || itemSelected?.status === 'Check out'}
+                  onClick={onCloseModal}
+                />
+              )}
+            />
+
+            <Modal.Window
+              name={FORM.ROOM}
+              title="Add form"
+              renderChildren={(onCloseModal) => (
+                <BookingForm onCloseModal={onCloseModal}/>
+              )}
+            />
+
+            <Modal.Window
+              name={FORM.EDIT}
+              title="Edit Booking"
+              renderChildren={(onCloseModal) =>
+                <BookingForm booking={bookingSelected} onCloseModal={onCloseModal}/>
+              }/>
+
+            <Modal.Window
+              name={FORM.CHECKOUT}
+              title="Check Out"
+              renderChildren={(onCloseModal) =>
+                <ConfirmMessage
+                  message={`Are you sure to check out this user? "${bookingSelected!.users!.name}"?`}
+                  onConfirm={handleClickCheckOutBtn}
+                  onCloseModal={onCloseModal}
+                />
+              }/>
+
+          </ActionTable>
         </Modal>
       </Direction>
 
-      <BookingTable />
+      {isLoading && <Spinner/>}
+
+      {
+        tempBookings &&
+        Boolean(tempBookings.length) &&
+        <Table<IBookingTable>
+          columns={columns}
+          rows={tempBookings}
+          count={count}
+          searchPlaceHolder={'Search by name...'}
+          stateSelected={{
+            itemSelected,
+            setItemSelected
+          }}
+          onRowClick={(data) => {
+            setItemSelected(data);
+          }}/>
+      }
+
+      {tempBookings && Boolean(!tempBookings.length) && <Message>No data to show here!</Message>}
     </StyledBooking>
   );
 };

hotel-management/src/pages/Booking/styled.ts

@@ -14,14 +14,20 @@ const Title = styled.h2`
   text-transform: capitalize;
 `;
 
-const StyledOperationTable = styled.div`
+const StyledTableOption = styled.div`
   display: flex;
   gap: 30px;
   justify-content: flex-end;
 `;
 
+const ActionTable = styled.div`
+  display: flex;
+  gap: 30px;
+`
+
 export {
   StyledBooking,
   Title,
-  StyledOperationTable
+  StyledTableOption,
+  ActionTable
 };

hotel-management/src/pages/Login/LoginForm.tsx

@@ -1,29 +1,29 @@
 import { useForm } from 'react-hook-form';
 
 // Components
-import Form from '@component/Form';
+import Form from '@src/components/Form';
 
 // Styled
 import { FieldInput, StyledLoginForm } from './styled';
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 // Constants
 import {
   INVALID_EMAIL,
   REQUIRED_FIELD_ERROR,
-} from '@constant/formValidateMessage';
+} from '@src/constants/formValidateMessage';
 
 // Types
-import { ILogin } from '@type/common';
+import { ILogin } from '@src/types/common';
 
 // Hooks
-import { useLogin } from '@hook/authentication/useLogin';
+import { useLogin } from '@src/hooks/authentication/useLogin';
 
 // Helpers
-import { isValidRegex } from '@helper/validators';
+import { isValidRegex } from '@src/helpers/validators';
 
 // Constants
-import { REGEX } from '@constant/commons';
+import { REGEX } from '@src/constants/commons';
 
 const LoginForm = () => {
   const {

hotel-management/src/pages/Login/__tests__/LoginForm.test.tsx

@@ -1,10 +1,10 @@
-import { useLogin } from "@hook/authentication/useLogin";
+import { useLogin } from "@src/hooks/authentication/useLogin";
-import LoginForm from "@page/Login/LoginForm";
+import LoginForm from "@src/pages/Login/LoginForm";
 import { fireEvent, render, waitFor } from "@testing-library/react";
 
 
 // Mock the useLogin hook
-jest.mock('@hook/authentication/useLogin', () => ({
+jest.mock('@src/hooks/authentication/useLogin', () => ({
   useLogin: jest.fn(),
 }));
 

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

@@ -7,7 +7,7 @@ import { LoginLayout, StyledLogo, TitleStyled } from './styled';
 import LoginForm from './LoginForm';
 
 // Hooks
-import { useAccount } from '@hook/authentication/useAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
 
 const Login = () => {
   const { account } = useAccount();

hotel-management/src/pages/Login/styled.ts

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 // Styled
-import CommonInput from '@commonStyle/CommonInput';
+import CommonInput from '@src/commons/styles/CommonInput';
 
 const LoginLayout = styled.main`
   height: 100vh;

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

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import NotFound from "..";
 import { useNavigate } from "react-router-dom";
 
@@ -9,18 +9,18 @@ jest.mock('react-router-dom', () => ({
 
 describe('NotFound', () => {
   test('Should render correctly', () => {
-    render(<NotFound />);
+    const wrapper = render(<NotFound />);
 
-    expect(screen.getByText('The page not found!')).toBeInTheDocument();
+    expect(wrapper.getByText('The page not found!')).toBeInTheDocument();
-    expect(screen.getByText('Go back!')).toBeInTheDocument();
+    expect(wrapper.getByText('Go back!')).toBeInTheDocument();
   });
 
   test('Should call navigate correctly when click button', () => {
     const mockNavigate = jest.fn();
     (useNavigate as jest.Mock).mockReturnValue(mockNavigate);
-    render(<NotFound />);
+    const wrapper = render(<NotFound />);
 
-    fireEvent.click(screen.getByText('Go back!'));
+    fireEvent.click(wrapper.getByText('Go back!'));
 
     expect(mockNavigate).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenCalledWith(-1);

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

@@ -1,27 +1,27 @@
 import { useForm } from 'react-hook-form';
 
 // Styled
-import Input from '@commonStyle/Input.ts';
+import Input from '@src/commons/styles/Input.ts';
 
 // Types
-import { IRoom } from '@type/room.ts';
+import { IRoom } from '@src/types/room.ts';
 
 // Constants
 import {
   INVALID_FIELD,
   REQUIRED_FIELD_ERROR,
-} from '@constant/formValidateMessage.ts';
+} from '@src/constants/formValidateMessage.ts';
 import { REGEX } from '../../constants/commons.ts';
 
 // Helpers
-import { isValidRegex, isValidString } from '@helper/validators.ts';
+import { isValidRegex, isValidString } from '@src/helpers/validators.ts';
 
 // Components
-import Form from '@component/Form/index.tsx';
+import Form from '@src/components/Form/index.tsx';
 
 // Hooks
-import { useCreateRoom } from '@hook/rooms/useCreateRoom.ts';
+import { useCreateRoom } from '@src/hooks/rooms/useCreateRoom.ts';
-import { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts';
+import { useUpdateRoom } from '@src/hooks/rooms/useUpdateRoom.ts';
 
 interface IRoomFormProp {
   onCloseModal?: () => void;