Update config, ButtonIcon, remove cloneElement

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

@@ -7,16 +7,16 @@ 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';
@@ -26,11 +26,11 @@ import {
   UserRoomAvailableContext,
   initialState,
   reducer,
-} from '@context/UserRoomAvailableContext';
+} from '@src/contexts/UserRoomAvailableContext';
 
 // Services
-import { getAllUsers } from '@service/userServices';
+import { getAllUsers } from '@src/services/userServices';
-import { getAllRooms } from '@service/roomServices';
+import { getAllRooms } from '@src/services/roomServices';
 
 const queryClient = new QueryClient();
 

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/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,14 +1,14 @@
 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';
 
 const AppLayout = () => {
   const { account } = useAccount();

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,29 @@
-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;
+  text?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
-  onClick?: () => void;
-  disabled?: boolean;
-  label?: string;
 }
 
 const ButtonIcon = ({
   icon,
-  children,
+  iconSize,
-  style,
+  iconColor,
-  iconStyle,
+  text,
-  onClick,
+  ...props
-  disabled,
-  label,
 }: IButtonIcon) => {
-  const isHaveChildren = Boolean(children);
-
   return (
     <StyledButtonIcon
-      aria-label={label}
+      iconColor={iconColor}
-      isHaveChildren={isHaveChildren}
+      iconSize={iconSize}
-      style={{
+      {...props}
-        fontSize: style?.fontSize,
-        backgroundColor: style?.backgroundColor,
-        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,57 +1,24 @@
 import styled, { css } from 'styled-components';
 
 interface IStyledButtonIcon {
-  isHaveChildren: boolean;
+  iconSize?: string;
-  style?: {
+  iconColor?: string;
-    fontSize?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
 }
 
 const StyledButtonIcon = styled.button<IStyledButtonIcon>`
   background: none;
 
-  padding: 10px;
-  transition: all 0.2s;
-
-  border: none;
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.color &&
-    css`
-      font-size: ${props.color};
-    `}
-
-  ${(props) =>
-    props.isHaveChildren
-      ? css`
   display: flex;
   align-items: center;
-          gap: 10px;
+  gap: 8px;
 
-          text-align: left;
+  font-size: var(--fs-sm-2x);
+
+  padding: 10px;
+  transition: all 0.2s;
   width: 100%;
-        `
+
-      : css`
+  border: none;
-          border-radius: var(--radius-md);
-        `}
 
   &:hover {
     background-color: var(--hover-background-color);
@@ -59,31 +26,25 @@ const StyledButtonIcon = styled.button<IStyledButtonIcon>`
 
   & 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)',
-    color: '#000',
-  },
-  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;

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

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import Table from '.';
 
 // Types
-import { IUser } from '@type/user';
+import { IUser } from '@src/types/user';
 
 interface ITableRow {
   user: IUser;

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

@@ -10,7 +10,7 @@ import {
 } from './styled';
 
 // Contexts
-import TableContext from '@context/TableContext';
+import TableContext from '@src/contexts/TableContext';
 
 export interface ITable {
   columns?: string;

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/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/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;

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

@@ -2,26 +2,26 @@ import toast from 'react-hot-toast';
 import { useCallback, useMemo } from 'react';
 
 // Helpers
-import { formatCurrency } from '@helper/helper';
+import { formatCurrency } from '@src/helpers/helper';
 
 // Types
-import { TBookingResponse } from '@type/booking';
+import { TBookingResponse } from '@src/types/booking';
 
 // Components
-import Modal from '@component/Modal';
+import Modal from '@src/components/Modal';
-import Table from '@component/Table';
+import Table from '@src/components/Table';
-import Menus from '@component/Menus';
+import Menus from '@src/components/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';
+import ConfirmMessage from '@src/components/ConfirmMessage';
 
 // Hooks
-import useCheckOut from '@hook/bookings/useCheckout';
+import useCheckOut from '@src/hooks/bookings/useCheckout';
 
 // Constants
-import { FORM } from '@constant/commons';
+import { FORM } from '@src/constants/commons';
 
 interface IBookingRow {
   booking: TBookingResponse;
@@ -29,38 +29,28 @@ interface IBookingRow {
 
 const BookingRow = ({ booking }: IBookingRow) => {
   const { checkOutBooking } = useCheckOut();
-  const {
+  const { id, users, startDate, endDate, rooms, amount, status } = booking;
-    id,
-    users,
-    startDate,
-    endDate,
-    rooms,
-    amount,
-    status
-  } = booking;
   const formattedPrice = useMemo(() => formatCurrency(amount), [amount]);
   const renderEditBtn = useCallback(
-    (onCloseModal: () => void) => (
+    (onOpenModal: () => void) => (
       <Menus.Button
-        onClick={onCloseModal}
+        onClick={onOpenModal}
         icon={<RiEditBoxFill />}
         disabled={!status}
-      >
+        label={'Edit'}
-        Edit
+      />
-      </Menus.Button>
     ),
     [status]
   );
 
   const renderCheckOutBtn = useCallback(
-    (onCloseModal: () => void) => (
+    (onOpenModal: () => void) => (
       <Menus.Button
-        onClick={onCloseModal}
+        onClick={onOpenModal}
         icon={<ImExit />}
         disabled={!status}
-      >
+        label={'Check out'}
-        Checkout
+      />
-      </Menus.Button>
     ),
     [status]
   );
@@ -77,6 +67,28 @@ const BookingRow = ({ booking }: IBookingRow) => {
     }
   }, [booking, checkOutBooking]);
 
+  const renderRow = useCallback(
+    (onCloseModal: () => void) => (
+      <BookingForm
+        booking={booking}
+        key={booking.id}
+        onCloseModal={onCloseModal}
+      />
+    ),
+    [booking]
+  );
+
+  const renderConfirmMessage = useCallback(
+    (onCloseModal: () => void) => (
+      <ConfirmMessage
+        message={`Are you sure to checkout this user? '${booking.users?.name}'`}
+        onConfirm={handleClickCheckOutBtn}
+        onCloseModal={onCloseModal}
+      />
+    ),
+    [booking.users?.name, handleClickCheckOutBtn]
+  );
+
   return (
     <Table.Row>
       <div>{users?.name}</div>
@@ -86,11 +98,7 @@ const BookingRow = ({ booking }: IBookingRow) => {
       </div>
       <div>{rooms?.name}</div>
       <div>{formattedPrice}</div>
-      <div>{
+      <div>{status ? 'Check in' : 'Check out'}</div>
-          status
-            ? 'Check in'
-            : 'Check out'
-        }</div>
 
       <div>
         <Modal>
@@ -109,16 +117,17 @@ const BookingRow = ({ booking }: IBookingRow) => {
               />
             </Menus.List>
 
-            <Modal.Window name={FORM.EDIT} title="Edit Booking">
+            <Modal.Window
-              <BookingForm booking={booking} key={booking.id} />
+              name={FORM.EDIT}
-            </Modal.Window>
+              title="Edit Booking"
+              renderChildren={renderRow}
+            />
 
-            <Modal.Window name={FORM.CHECKOUT} title="Checkout">
+            <Modal.Window
-              <ConfirmMessage
+              name={FORM.CHECKOUT}
-                message={`Are you sure to checkout this user? '${booking.users?.name}'`}
+              title="Checkout"
-                onConfirm={handleClickCheckOutBtn}
+              renderChildren={renderConfirmMessage}
             />
-            </Modal.Window>
           </Menus.Menu>
         </Modal>
       </div>

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

@@ -1,23 +1,23 @@
 import { useCallback } from 'react';
 
 // Components
-import Menus from '@component/Menus';
+import Menus from '@src/components/Menus';
-import Table from '@component/Table';
+import Table from '@src/components/Table';
-import Message from '@component/Message';
+import Message from '@src/components/Message';
-import Search from '@component/Search';
+import Search from '@src/components/Search';
-import Pagination from '@component/Pagination';
+import Pagination from '@src/components/Pagination';
 import BookingRow from './BookingRow';
 
 // Styled
 import { StyledOperationTable } from './styled';
-import Direction from '@commonStyle/Direction';
+import Direction from '@src/commons/styles/Direction';
-import Spinner from '@commonStyle/Spinner';
+import Spinner from '@src/commons/styles/Spinner';
 
 // Hooks
-import { useBookings } from '@hook/bookings/useBookings';
+import { useBookings } from '@src/hooks/bookings/useBookings';
 
 // Types
-import { TBookingResponse } from '@type/booking';
+import { TBookingResponse } from '@src/types/booking';
 
 const BookingTable = () => {
   const columnName = [

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

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render } from '@testing-library/react';
 
 // Types
-import { TBookingResponse } from '@type/booking';
+import { TBookingResponse } from '@src/types/booking';
 
 // Components
 import BookingRow from '../BookingRow';

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

@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 
 // Components
-import BookingTable from '@page/Booking/BookingTable';
+import BookingTable from '@src/pages/Booking/BookingTable';
 
 describe('UserTable', () => {
   const queryClient = new QueryClient();

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,15 +1,15 @@
 // Styled
-import Direction from '@commonStyle/Direction';
+import Direction from '@src/commons/styles/Direction';
 import { StyledBooking, Title } from './styled';
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 // Components
-import Modal from '@component/Modal';
+import Modal from '@src/components/Modal';
 import BookingTable from './BookingTable';
 import BookingForm from './BookingForm';
 
 // Constants
-import { FORM } from '@constant/commons';
+import { FORM } from '@src/constants/commons';
 
 const Booking = () => {
   return (
@@ -24,9 +24,13 @@ const Booking = () => {
               <Button onClick={onCloseModal}>Add booking</Button>
             )}
           />
-          <Modal.Window name={FORM.BOOKING} title="Add form">
+          <Modal.Window
-            <BookingForm />
+            name={FORM.BOOKING}
-          </Modal.Window>
+            title="Add form"
+            renderChildren={(onCloseModal) => (
+              <BookingForm onCloseModal={onCloseModal} />
+            )}
+          />
         </Modal>
       </Direction>
 

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;

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

@@ -1,66 +1,80 @@
 import { useCallback, useMemo } from 'react';
 
 // Helpers
-import { formatCurrency } from '@helper/helper';
+import { formatCurrency } from '@src/helpers/helper';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Components
 import RoomForm from './RoomForm';
-import Modal from '@component/Modal';
+import Modal from '@src/components/Modal';
-import Table from '@component/Table';
+import Table from '@src/components/Table';
-import Menus from '@component/Menus';
+import Menus from '@src/components/Menus';
 import { RiEditBoxFill } from 'react-icons/ri';
 import { HiTrash } from 'react-icons/hi';
-import ConfirmMessage from '@component/ConfirmMessage';
+import ConfirmMessage from '@src/components/ConfirmMessage';
 
 // Hooks
-import { useSetIsDeleteRoom } from '@hook/rooms/useSetIsDeleteRoom';
+import { useSetIsDeleteRoom } from '@src/hooks/rooms/useSetIsDeleteRoom';
 
 // Constants
-import { FORM } from '@constant/commons';
+import { FORM } from '@src/constants/commons';
 
 interface IRoomRow {
   room: IRoom;
 }
 
 const RoomRow = ({ room }: IRoomRow) => {
-  const {
+  const { id, name, price, status } = room;
-    id,
-    name,
-    price,
-    status
-  } = room;
   const { setIsDeleteRoom } = useSetIsDeleteRoom();
   const formattedPrice = useMemo(() => formatCurrency(price), [price]);
   const renderEditBtn = useCallback(
-    (onCloseModal: () => void) => (
+    (onOpenModal: () => void) => (
-      <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
+      <Menus.Button
-        Edit
+        onClick={onOpenModal}
-      </Menus.Button>
+        icon={<RiEditBoxFill />}
+        label={'Edit'}
+      />
     ),
     []
   );
   const renderDeleteBtn = useCallback(
-    (onCloseModal: () => void) => (
+    (onOpenModal: () => void) => (
-      <Menus.Button icon={<HiTrash />} onClick={onCloseModal} disabled={status}>
+      <Menus.Button
-        Delete
+        icon={<HiTrash />}
-      </Menus.Button>
+        onClick={onOpenModal}
+        disabled={status}
+        label={'Delete'}
+      />
     ),
     [status]
   );
 
+  const renderRow = useCallback(
+    (onCloseModal: () => void) => (
+      <RoomForm room={room} onCloseModal={onCloseModal} />
+    ),
+    [room]
+  );
+
+  const renderConfirmMessage = useCallback(
+    (onCloseModal: () => void) => (
+      <ConfirmMessage
+        message={`Are you sure to delete ${name}?`}
+        onConfirm={() => setIsDeleteRoom(id)}
+        onCloseModal={onCloseModal}
+      />
+    ),
+    [id, name, setIsDeleteRoom]
+  );
+
   return (
     <Table.Row>
       <div>{id}</div>
       <div>{name}</div>
       <div>{formattedPrice}</div>
-      <div>{
+      <div>{status ? 'Unavailable' : 'Available'}</div>
-        status 
-          ? 'Unavailable' 
-          : 'Available'
-      }</div>
 
       <div>
         <Modal>
@@ -78,16 +92,17 @@ const RoomRow = ({ room }: IRoomRow) => {
               />
             </Menus.List>
 
-            <Modal.Window name={FORM.EDIT} title="Edit Room">
+            <Modal.Window
-              <RoomForm room={room} />
+              name={FORM.EDIT}
-            </Modal.Window>
+              title="Edit Room"
+              renderChildren={renderRow}
+            />
 
-            <Modal.Window name={FORM.DELETE} title="Delete Room">
+            <Modal.Window
-              <ConfirmMessage
+              name={FORM.DELETE}
-                message={`Are you sure to delete ${name}?`}
+              title="Delete Room"
-                onConfirm={() => setIsDeleteRoom(id)}
+              renderChildren={renderConfirmMessage}
             />
-            </Modal.Window>
           </Menus.Menu>
         </Modal>
       </div>

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

@@ -1,28 +1,28 @@
 import { useCallback } from 'react';
 
 // Components
-import Menus from '@component/Menus';
+import Menus from '@src/components/Menus';
-import Table from '@component/Table';
+import Table from '@src/components/Table';
-import Message from '@component/Message';
+import Message from '@src/components/Message';
-import Search from '@component/Search';
+import Search from '@src/components/Search';
-import SortBy from '@component/SortBy';
+import SortBy from '@src/components/SortBy';
-import OrderBy from '@component/OrderBy';
+import OrderBy from '@src/components/OrderBy';
 import RoomRow from './RoomRow';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Constants
-import { ORDERBY_OPTIONS, ROOM_PAGE } from '@constant/commons';
+import { ORDERBY_OPTIONS, ROOM_PAGE } from '@src/constants/commons';
 
 // Styled
 import { StyledOperationTable } from './styled';
-import Direction from '@commonStyle/Direction';
+import Direction from '@src/commons/styles/Direction';
-import Spinner from '@commonStyle/Spinner';
+import Spinner from '@src/commons/styles/Spinner';
 
 // Hooks
-import { useRooms } from '@hook/rooms/useRooms';
+import { useRooms } from '@src/hooks/rooms/useRooms';
-import Pagination from '@component/Pagination';
+import Pagination from '@src/components/Pagination';
 
 const RoomTable = () => {
   const columnName = ['Id', 'Name', 'Price', 'Status'];

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

@@ -8,7 +8,7 @@ import {
 } from '@testing-library/react';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Components
 import RoomForm from '../RoomForm';
@@ -16,16 +16,16 @@ import RoomForm from '../RoomForm';
 const mockCreateRoom = jest.fn();
 const mockUpdateRoom = jest.fn();
 
-jest.mock('@hook/rooms/useCreateRoom.ts', () => ({
+jest.mock('@src/hooks/rooms/useCreateRoom.ts', () => ({
-  ...jest.requireActual('@hook/rooms/useCreateRoom.ts'),
+  ...jest.requireActual('@src/hooks/rooms/useCreateRoom.ts'),
   useCreateRoom: jest.fn(() => ({
     isCreating: false,
     createRoom: mockCreateRoom,
   })),
 }));
 
-jest.mock('@hook/rooms/useUpdateRoom', () => ({
+jest.mock('@src/hooks/rooms/useUpdateRoom', () => ({
-  ...jest.requireActual('@hook/rooms/useUpdateRoom'),
+  ...jest.requireActual('@src/hooks/rooms/useUpdateRoom'),
   useUpdateRoom: jest.fn(() => ({
     isUpdating: false,
     updateRoom: mockUpdateRoom,

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

@@ -2,7 +2,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render } from '@testing-library/react';
 
 // Types
-import { IRoom } from '@type/room';
+import { IRoom } from '@src/types/room';
 
 // Components
 import RoomRow from '../RoomRow';

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

@@ -3,7 +3,7 @@ import { BrowserRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 
 // Components
-import RoomTable from '@page/Room/RoomTable';
+import RoomTable from '@src/pages/Room/RoomTable';
 
 describe('UserTable', () => {
   const queryClient = new QueryClient();

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

@@ -1,12 +1,12 @@
 // Components
 import RoomTable from './RoomTable';
 import RoomForm from './RoomForm';
-import Modal from '@component/Modal';
+import Modal from '@src/components/Modal';
 
 // Styled
 import { StyledRoom, Title } from './styled';
-import Direction from '@commonStyle/Direction.ts';
+import Direction from '@src/commons/styles/Direction';
-import Button from '@commonStyle/Button';
+import Button from '@src/commons/styles/Button';
 
 const Room = () => {
   return (
@@ -21,9 +21,13 @@ const Room = () => {
               <Button onClick={onCloseModal}>Add room</Button>
             )}
           />
-          <Modal.Window name="room-form" title="Add form">
+          <Modal.Window
-            <RoomForm />
+            name="room-form"
-          </Modal.Window>
+            title="Add form"
+            renderChildren={(onCloseModal) => (
+              <RoomForm onCloseModal={onCloseModal} />
+            )}
+          />
         </Modal>
       </Direction>