Update config, ButtonIcon, remove cloneElement

2026-09-22 13:38:51 +00:00 · 2023-12-06 17:43:16 +07:00
parent 0a893aae3f
commit 7c7e6cd1b1
118 changed files with 718 additions and 624 deletions
@@ -0,0 +1 @@
+import '@testing-library/jest-dom'
@@ -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',
-    '\\.(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'],
+    '@src/(.*)': ['<rootDir>/src/$1'],
  },
-  setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest-setup.ts'],
  setupFiles: ['<rootDir>/.jest/setEnvVar.ts'],
  testEnvironmentOptions: {
    customExportConditions: [''],
@@ -1 +0,0 @@
-import "@testing-library/jest-dom";
@@ -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",
@@ -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}
@@ -1,14 +1,14 @@
 import { render, act, RenderResult } from '@testing-library/react';

 // Services
-import * as userServices from '@service/userServices';
-import * as roomServices from '@service/roomServices';
+import * as userServices from '@src/services/userServices';
+import * as roomServices from '@src/services/roomServices';

 // Components
 import App from './App';

-jest.mock('@service/userServices');
-jest.mock('@service/roomServices');
+jest.mock('@src/services/userServices');
+jest.mock('@src/services/roomServices');

 describe('App', () => {
  let wrapper: RenderResult | null = null;
@@ -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 RootLayout from '@component/RootLayout';
+import RouteProtected from '@src/components/RouteProtected';
+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 Account from '@page/Account';
+import Login from '@src/pages/Login';
+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 { getAllRooms } from '@service/roomServices';
+import { getAllUsers } from '@src/services/userServices';
+import { getAllRooms } from '@src/services/roomServices';

 const queryClient = new QueryClient();

@@ -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;
@@ -21,8 +21,9 @@ exports[`AppLayout Should render correctly 1`] = `
            <li>
              <button
                aria-label="Profile"
-                class="sc-bdnyFh bxHnoO"
-                iconstyle="[object Object]"
+                class="sc-bdnyFh olJWF"
+                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"
-                iconstyle="[object Object]"
+                class="sc-bdnyFh olJWF"
+                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"
-              iconstyle="[object Object]"
+              class="sc-bdnyFh olJWF"
+              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"
-              iconstyle="[object Object]"
+              class="sc-bdnyFh olJWF"
+              iconcolor="#000"
+              iconsize="23px"
            >
              <svg
                aria-hidden="true"
@@ -218,7 +219,6 @@ exports[`AppLayout Should render correctly 1`] = `
                />
              </svg>
               
-              <span />
            </button>
          </li>
        </ul>
@@ -1,14 +1,14 @@
 import { Outlet } from 'react-router-dom';

 // Components
-import Header from '@component/Header';
-import Sidebar from '@component/Sidebar';
+import Header from '../Header';
+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();
@@ -9,7 +9,6 @@ describe('ButtonIcon', () => {
    <ButtonIcon
      aria-label="Logout"
      icon={<HiOutlineLogout />}
-      iconStyle={{ size: '23px' }}
    />
  );

@@ -6,8 +6,10 @@ exports[`ButtonIcon Should render correctly 1`] = `
  "baseElement": <body>
    <div>
      <button
-        class="sc-bdnyFh bxHnoO"
-        iconstyle="[object Object]"
+        aria-label="Logout"
+        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"
-      iconstyle="[object Object]"
+      aria-label="Logout"
+      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],
@@ -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;
-  style?: {
-    fontSize?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
-  onClick?: () => void;
-  disabled?: boolean;
-  label?: string;
+  iconSize?: string;
+  iconColor?: string;
+  text?: string;
 }

 const ButtonIcon = ({
  icon,
-  children,
-  style,
-  iconStyle,
-  onClick,
-  disabled,
-  label,
+  iconSize,
+  iconColor,
+  text,
+  ...props
 }: IButtonIcon) => {
-  const isHaveChildren = Boolean(children);
-
  return (
    <StyledButtonIcon
-      aria-label={label}
-      isHaveChildren={isHaveChildren}
-      style={{
-        fontSize: style?.fontSize,
-        backgroundColor: style?.backgroundColor,
-        color: style?.color,
-      }}
-      iconStyle={iconStyle}
-      onClick={onClick}
-      disabled={disabled}
+      iconColor={iconColor}
+      iconSize={iconSize}
+      {...props}
    >
-      {icon} <span>{children}</span>
+      {icon} {text && <span>{text}</span>}
    </StyledButtonIcon>
  );
 };
@@ -1,89 +1,50 @@
 import styled, { css } from 'styled-components';

 interface IStyledButtonIcon {
-  isHaveChildren: boolean;
-  style?: {
-    fontSize?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
+  iconSize?: string;
+  iconColor?: string;
 }

 const StyledButtonIcon = styled.button<IStyledButtonIcon>`
  background: none;

+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  font-size: var(--fs-sm-2x);
+
  padding: 10px;
  transition: all 0.2s;
+  width: 100%;

  border: none;

-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.color &&
-    css`
-      font-size: ${props.color};
-    `}
-
-  ${(props) =>
-    props.isHaveChildren
-      ? css`
-          display: flex;
-          align-items: center;
-          gap: 10px;
-
-          text-align: left;
-          width: 100%;
-        `
-      : css`
-          border-radius: var(--radius-md);
-        `}
-
  &:hover {
    background-color: var(--hover-background-color);
  }

  & svg {
    ${(props) =>
-      props.iconStyle?.size &&
+      props.iconSize &&
      css`
-        width: ${props.iconStyle.size};
-        height: ${props.iconStyle.size};
+        width: ${props.iconSize};
+        height: ${props.iconSize};
      `}

    ${(props) =>
-      props.iconStyle?.color &&
+      props.iconColor &&
      css`
-        color: ${props.iconStyle.color};
+        color: ${props.iconColor};
      `}
+
    transition: all 0.3s;
  }
 `;

 StyledButtonIcon.defaultProps = {
-  style: {
-    fontSize: '14px',
-    backgroundColor: 'var(--primary-color)',
-    color: '#000',
-  },
-  iconStyle: {
-    color: '#000',
-    size: '14px',
-  },
+  iconSize: '16px',
+  iconColor: '#000',
 };

 export { StyledButtonIcon };
@@ -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;
@@ -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;
@@ -11,7 +11,7 @@ import {
 } from './styled';

 // Types
-import { TDirection } from '@type/common';
+import { TDirection } from '@src/types/common';

 interface IFormProps {
  children: ReactNode;
@@ -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;
@@ -19,8 +19,9 @@ exports[`Header Should render correctly 1`] = `
          <li>
            <button
              aria-label="Profile"
-              class="sc-bdnyFh bxHnoO"
-              iconstyle="[object Object]"
+              class="sc-bdnyFh olJWF"
+              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"
-              iconstyle="[object Object]"
+              class="sc-bdnyFh olJWF"
+              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"
-            iconstyle="[object Object]"
+            class="sc-bdnyFh olJWF"
+            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"
-            iconstyle="[object Object]"
+            class="sc-bdnyFh olJWF"
+            iconcolor="#000"
+            iconsize="23px"
          >
            <svg
              aria-hidden="true"
@@ -133,7 +134,6 @@ exports[`Header Should render correctly 1`] = `
              />
            </svg>
             
-            <span />
          </button>
        </li>
      </ul>
@@ -11,8 +11,9 @@ exports[`HeaderMenu Should render correctly 1`] = `
        <li>
          <button
            aria-label="Profile"
-            class="sc-bdnyFh bxHnoO"
-            iconstyle="[object Object]"
+            class="sc-bdnyFh olJWF"
+            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"
-            iconstyle="[object Object]"
+            class="sc-bdnyFh olJWF"
+            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"
-          iconstyle="[object Object]"
+          class="sc-bdnyFh olJWF"
+          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"
-          iconstyle="[object Object]"
+          class="sc-bdnyFh olJWF"
+          iconcolor="#000"
+          iconsize="23px"
        >
          <svg
            aria-hidden="true"
@@ -116,7 +117,6 @@ exports[`HeaderMenu Should render correctly 1`] = `
            />
          </svg>
           
-          <span />
        </button>
      </li>
    </ul>
@@ -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>
@@ -17,12 +17,16 @@ describe('Menus', () => {
          <Menus.Toggle id={id} />

          <Menus.List id={id.toString()}>
-            <Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
-              Edit
-            </Menus.Button>
-            <Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
-              Delete
-            </Menus.Button>
+            <Menus.Button
+              onClick={handleOnClick}
+              icon={<RiEditBoxFill />}
+              label="Edit"
+            />
+            <Menus.Button
+              onClick={handleOnClick}
+              icon={<RiDeleteBin2Line />}
+              label="Delete"
+            />
          </Menus.List>
        </Menus.Menu>
      </Menus>
@@ -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 {
-  StyledMenu,
-  StyledList,
-  StyledToggle
-} from './styled';
+import { 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 {
-    openId,
-    close,
-    open
-  } = useContext(MenusContext);
+  const { openId, close, open } = useContext(MenusContext);
  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
    e.stopPropagation();

-    openId !== id
-      ? open!(id)
-      : close!();
+    openId !== id ? 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>
  );
 };
@@ -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">
-        <p>This is a windows</p>
-      </Modal.Window>
+      <Modal.Window
+        name="room-form"
+        title="Add form"
+        renderChildren={(fn) => <p onClick={fn}>This is a windows</p>}
+      />
    </Modal>
  );

@@ -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';
@@ -25,7 +23,7 @@ const Modal = ({ children }: IModal) => {

  const close = () => setOpenName('');
  const open = setOpenName;
-
+  
  return (
    <ModalContext.Provider value={{ openName, close, open }}>
      {children}
@@ -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>,
@@ -1,4 +1,3 @@
-
 import { render } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';

@@ -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 (
@@ -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>
@@ -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(() => {
@@ -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';
@@ -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();
@@ -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';

@@ -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';

@@ -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),
 }));

@@ -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;
@@ -1,5 +1,5 @@
 // Components
-import Nav from '@component/Nav';
+import Nav from '../Nav';

 // Styled
 import { Heading, StyledSidebar } from './styled';
@@ -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: {
@@ -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;
@@ -10,7 +10,7 @@ import {
 } from './styled';

 // Contexts
-import TableContext from '@context/TableContext';
+import TableContext from '@src/contexts/TableContext';

 export interface ITable {
  columns?: string;
@@ -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[];
@@ -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: {
@@ -1,5 +1,5 @@
 // Helpers
-import { formatCurrency, getDayDiff } from '@helper/helper';
+import { formatCurrency, getDayDiff } from '../helper';

 describe('formatCurrency', () => {
  test('Should format correctly', () => {
@@ -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) =>
@@ -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();

@@ -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', () => {
@@ -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';
@@ -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
@@ -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
@@ -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
@@ -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.
@@ -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'),
@@ -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(),
 }));

@@ -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');
@@ -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');
@@ -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
@@ -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();
@@ -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
@@ -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
@@ -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');
@@ -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'),
@@ -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');
@@ -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');
@@ -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
@@ -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
@@ -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'],
      });
@@ -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
@@ -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
@@ -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
@@ -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');
@@ -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');
@@ -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');
@@ -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'),
@@ -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
@@ -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 { useUserRoomAvailable } from '@hook/useUserRoomAvailable';
+import { DELETE_SUCCESS } from '@src/constants/messages';
+
+// 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'],
      });
@@ -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
@@ -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
@@ -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 { useAccount } from '@hook/authentication/useAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';

 interface IAccountForm {
  fullName: string;
@@ -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;
@@ -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 { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useAccount } from '@src/hooks/authentication/useAccount';
+import { useUpdateAccount } from '@src/hooks/authentication/useUpdateAccount';

-jest.mock('@hook/authentication/useUpdateAccount');
-jest.mock('@hook/authentication/useAccount');
+jest.mock('@src/hooks/authentication/useUpdateAccount');
+jest.mock('@src/hooks/authentication/useAccount');

 const mockAccount = {
  email: 'admin@nezumi.site',
@@ -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;
@@ -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 Select, { ISelectOptions } from '@component/Select/index.tsx';
+import Form from '@src/components/Form';
+import Select, { ISelectOptions } from '@src/components/Select/index.tsx';

 // Hooks
-import { useCreateBooking } from '@hook/bookings/useCreateBooking.ts';
-import { useUpdateBooking } from '@hook/bookings/useUpdateBooking.ts';
-import { useUserRoomAvailable } from '@hook/useUserRoomAvailable.ts';
+import { useCreateBooking } from '@src/hooks/bookings/useCreateBooking';
+import { useUpdateBooking } from '@src/hooks/bookings/useUpdateBooking';
+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 { updateUserBookedStatus } from '@service/userServices.ts';
+import { getRoomById, updateRoomStatus } from '@src/services/roomServices';
+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;
@@ -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 Table from '@component/Table';
-import Menus from '@component/Menus';
+import Modal from '@src/components/Modal';
+import Table from '@src/components/Table';
+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 {
-    id,
-    users,
-    startDate,
-    endDate,
-    rooms,
-    amount,
-    status
-  } = booking;
+  const { 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}
-      >
-        Edit
-      </Menus.Button>
+        label={'Edit'}
+      />
    ),
    [status]
  );

  const renderCheckOutBtn = useCallback(
-    (onCloseModal: () => void) => (
-      <Menus.Button 
-        onClick={onCloseModal}
+    (onOpenModal: () => void) => (
+      <Menus.Button
+        onClick={onOpenModal}
        icon={<ImExit />}
        disabled={!status}
-      >
-        Checkout
-      </Menus.Button>
+        label={'Check out'}
+      />
    ),
    [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>{
-          status
-            ? 'Check in'
-            : 'Check out'
-        }</div>
+      <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">
-              <BookingForm booking={booking} key={booking.id} />
-            </Modal.Window>
+            <Modal.Window
+              name={FORM.EDIT}
+              title="Edit Booking"
+              renderChildren={renderRow}
+            />

-            <Modal.Window name={FORM.CHECKOUT} title="Checkout">
-              <ConfirmMessage
-                message={`Are you sure to checkout this user? '${booking.users?.name}'`}
-                onConfirm={handleClickCheckOutBtn}
-              />
-            </Modal.Window>
+            <Modal.Window
+              name={FORM.CHECKOUT}
+              title="Checkout"
+              renderChildren={renderConfirmMessage}
+            />
          </Menus.Menu>
        </Modal>
      </div>
@@ -1,23 +1,23 @@
 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 Menus from '@src/components/Menus';
+import Table from '@src/components/Table';
+import Message from '@src/components/Message';
+import Search from '@src/components/Search';
+import Pagination from '@src/components/Pagination';
 import BookingRow from './BookingRow';

 // Styled
 import { StyledOperationTable } from './styled';
-import Direction from '@commonStyle/Direction';
-import Spinner from '@commonStyle/Spinner';
+import Direction from '@src/commons/styles/Direction';
+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 = [
@@ -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.requireActual('@hook/bookings/useUpdateBooking'),
+jest.mock('@src/hooks/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
@@ -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';
@@ -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();
@@ -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"
          />
@@ -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">
-            <BookingForm />
-          </Modal.Window>
+          <Modal.Window
+            name={FORM.BOOKING}
+            title="Add form"
+            renderChildren={(onCloseModal) => (
+              <BookingForm onCloseModal={onCloseModal} />
+            )}
+          />
        </Modal>
      </Direction>

@@ -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 {
@@ -1,10 +1,10 @@
-import { useLogin } from "@hook/authentication/useLogin";
-import LoginForm from "@page/Login/LoginForm";
+import { useLogin } from "@src/hooks/authentication/useLogin";
+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(),
 }));

@@ -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();
@@ -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;
@@ -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(screen.getByText('Go back!')).toBeInTheDocument();
+    expect(wrapper.getByText('The page not found!')).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);
@@ -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 { useUpdateRoom } from '@hook/rooms/useUpdateRoom.ts';
+import { useCreateRoom } from '@src/hooks/rooms/useCreateRoom.ts';
+import { useUpdateRoom } from '@src/hooks/rooms/useUpdateRoom.ts';

 interface IRoomFormProp {
  onCloseModal?: () => void;
@@ -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 Table from '@component/Table';
-import Menus from '@component/Menus';
+import Modal from '@src/components/Modal';
+import Table from '@src/components/Table';
+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 {
-    id,
-    name,
-    price,
-    status
-  } = room;
+  const { id, name, price, status } = room;
  const { setIsDeleteRoom } = useSetIsDeleteRoom();
  const formattedPrice = useMemo(() => formatCurrency(price), [price]);
  const renderEditBtn = useCallback(
-    (onCloseModal: () => void) => (
-      <Menus.Button onClick={onCloseModal} icon={<RiEditBoxFill />}>
-        Edit
-      </Menus.Button>
+    (onOpenModal: () => void) => (
+      <Menus.Button
+        onClick={onOpenModal}
+        icon={<RiEditBoxFill />}
+        label={'Edit'}
+      />
    ),
    []
  );
  const renderDeleteBtn = useCallback(
-    (onCloseModal: () => void) => (
-      <Menus.Button icon={<HiTrash />} onClick={onCloseModal} disabled={status}>
-        Delete
-      </Menus.Button>
+    (onOpenModal: () => void) => (
+      <Menus.Button
+        icon={<HiTrash />}
+        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>{
-        status 
-          ? 'Unavailable' 
-          : 'Available'
-      }</div>
+      <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">
-              <RoomForm room={room} />
-            </Modal.Window>
+            <Modal.Window
+              name={FORM.EDIT}
+              title="Edit Room"
+              renderChildren={renderRow}
+            />

-            <Modal.Window name={FORM.DELETE} title="Delete Room">
-              <ConfirmMessage
-                message={`Are you sure to delete ${name}?`}
-                onConfirm={() => setIsDeleteRoom(id)}
-              />
-            </Modal.Window>
+            <Modal.Window
+              name={FORM.DELETE}
+              title="Delete Room"
+              renderChildren={renderConfirmMessage}
+            />
          </Menus.Menu>
        </Modal>
      </div>
@@ -1,28 +1,28 @@
 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 SortBy from '@component/SortBy';
-import OrderBy from '@component/OrderBy';
+import Menus from '@src/components/Menus';
+import Table from '@src/components/Table';
+import Message from '@src/components/Message';
+import Search from '@src/components/Search';
+import SortBy from '@src/components/SortBy';
+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 Spinner from '@commonStyle/Spinner';
+import Direction from '@src/commons/styles/Direction';
+import Spinner from '@src/commons/styles/Spinner';

 // Hooks
-import { useRooms } from '@hook/rooms/useRooms';
-import Pagination from '@component/Pagination';
+import { useRooms } from '@src/hooks/rooms/useRooms';
+import Pagination from '@src/components/Pagination';

 const RoomTable = () => {
  const columnName = ['Id', 'Name', 'Price', 'Status'];
@@ -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.requireActual('@hook/rooms/useCreateRoom.ts'),
+jest.mock('@src/hooks/rooms/useCreateRoom.ts', () => ({
+  ...jest.requireActual('@src/hooks/rooms/useCreateRoom.ts'),
  useCreateRoom: jest.fn(() => ({
    isCreating: false,
    createRoom: mockCreateRoom,
  })),
 }));

-jest.mock('@hook/rooms/useUpdateRoom', () => ({
-  ...jest.requireActual('@hook/rooms/useUpdateRoom'),
+jest.mock('@src/hooks/rooms/useUpdateRoom', () => ({
+  ...jest.requireActual('@src/hooks/rooms/useUpdateRoom'),
  useUpdateRoom: jest.fn(() => ({
    isUpdating: false,
    updateRoom: mockUpdateRoom,
@@ -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';
@@ -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();
@@ -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 Button from '@commonStyle/Button';
+import Direction from '@src/commons/styles/Direction';
+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">
-            <RoomForm />
-          </Modal.Window>
+          <Modal.Window
+            name="room-form"
+            title="Add form"
+            renderChildren={(onCloseModal) => (
+              <RoomForm onCloseModal={onCloseModal} />
+            )}
+          />
        </Modal>
      </Direction>

--- a/Show More
+++ b/Show More