Update common file

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

@@ -37,6 +37,7 @@ const Button = styled.button<IButtonStyle>`
   &:disabled,
   &[disabled] {
     cursor: not-allowed;
+    background-color: var(--disabled-btn-color);
   }
 `;
 

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

@@ -1,7 +1,6 @@
+import { TDirection } from '@type/common';
 import styled, { css } from 'styled-components';
 
-type TDirection = 'vertical' | 'horizontal';
-
 interface IDirection {
   type?: TDirection;
 }

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

@@ -1,4 +1,6 @@
 import { ReactNode } from 'react';
+
+// Styled
 import { StyledButtonIcon } from './styled';
 
 interface IButtonIcon {
@@ -14,6 +16,7 @@ interface IButtonIcon {
     size?: string;
   };
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 const ButtonIcon = ({
@@ -22,6 +25,7 @@ const ButtonIcon = ({
   style,
   iconStyle,
   onClick,
+  disabled,
 }: IButtonIcon) => {
   const isHaveChildren = Boolean(children);
 
@@ -35,6 +39,7 @@ const ButtonIcon = ({
       }}
       iconStyle={iconStyle}
       onClick={onClick}
+      disabled={disabled}
     >
       {icon} <span>{children}</span>
     </StyledButtonIcon>

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

@@ -10,6 +10,9 @@ import {
   FormBtn,
 } from './styled';
 
+// Types
+import { TDirection } from '@type/common';
+
 interface IFormProps {
   children: ReactNode;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -20,6 +23,7 @@ interface IFormRow {
   label: string;
   error?: string;
   children: ReactNode;
+  direction?: TDirection;
 }
 
 const Form = ({ children, onSubmit, id }: IFormProps) => {
@@ -30,9 +34,9 @@ const Form = ({ children, onSubmit, id }: IFormProps) => {
   );
 };
 
-const FormRow = ({ label, error, children }: IFormRow) => {
+const FormRow = ({ label, error, children, direction }: IFormRow) => {
   return (
-    <StyledFormRow>
+    <StyledFormRow direction={direction}>
       <Label>{label}</Label>
       <div>
         {children}

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

@@ -1,4 +1,11 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+
+// Types
+import { TDirection } from '@type/common';
+
+interface IStyledFormRow {
+  direction?: TDirection;
+}
 
 // Styled
 import Button from '@commonStyle/Button';
@@ -16,11 +23,20 @@ const StyledActionBtn = styled.div`
   gap: 100px;
 `;
 
-const StyledFormRow = styled.div`
+const StyledFormRow = styled.div<IStyledFormRow>`
   display: flex;
   justify-content: space-between;
+
+  ${(props) =>
+    props.direction === 'horizontal'
+      ? css`
           align-items: center;
           gap: 100px;
+        `
+      : css`
+          flex-direction: column;
+          gap: 15px;
+        `}
 `;
 
 const Label = styled.label`
@@ -45,4 +61,8 @@ const FormBtn = styled(Button)`
   }
 `;
 
+StyledFormRow.defaultProps = {
+  direction: 'horizontal',
+};
+
 export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error, FormBtn };

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

@@ -6,7 +6,12 @@ import ButtonIcon from '@component/ButtonIcon';
 // Styled
 import { StyledHeaderMenu } from './styled';
 
+// Hooks
+import { useLogout } from '@hook/authentication/useLogout';
+
 const HeaderMenu = () => {
+  const { logout, isPending } = useLogout();
+
   return (
     <StyledHeaderMenu>
       <li>
@@ -18,6 +23,8 @@ const HeaderMenu = () => {
       </li>
       <li>
         <ButtonIcon
+          onClick={logout}
+          disabled={isPending}
           aria-label="Logout"
           icon={<HiOutlineLogout />}
           iconStyle={{ size: '23px' }}

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

@@ -0,0 +1,24 @@
+import { Outlet } from 'react-router-dom';
+
+// Styled
+import Spinner from '@commonStyle/Spinner';
+import { FullPageLayout } from './styled';
+
+// Hooks
+import { useAccount } from '@hook/authentication/useAccount';
+
+const RootLayout = () => {
+  const { isPending } = useAccount();
+
+  return isPending ? (
+    <FullPageLayout>
+      <Spinner />
+    </FullPageLayout>
+  ) : (
+    <>
+      <Outlet />
+    </>
+  );
+};
+
+export default RootLayout;

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

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+
+const FullPageLayout = styled.div`
+  height: 100vh;
+  background-color: var(--color-grey-50);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+export { FullPageLayout };

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

@@ -0,0 +1,15 @@
+import { useAccount } from '@hook/authentication/useAccount';
+import { ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+interface IRouteProtected {
+  children: ReactNode;
+}
+const RouteProtected = ({ children }: IRouteProtected) => {
+  // Load user login
+  const { account } = useAccount();
+
+  return !account ? <Navigate to="/login" /> : children;
+};
+
+export default RouteProtected;

hotel-management/src/constants/path.ts

@@ -4,3 +4,4 @@ export const ROOM = '/room';
 export const OTHER_PATH = '*';
 export const USER_PATH = 'users';
 export const ROOM_PATH = 'rooms';
+export const LOGIN = 'login';

hotel-management/src/styles/abstracts/variables.css

@@ -23,6 +23,8 @@
 
   --form-color: #fff;
 
+  --background-login: #f8f8f8;
+
   --shadow-sm: 0px 10px 20px rgba(0, 0, 0, 0.2);
 
   --fs-md: 30px;

hotel-management/src/types/common.ts

@@ -7,4 +7,11 @@ interface IDataState {
   isBooked?: boolean;
 }
 
-export type { Nullable, IDataState };
+interface ILogin {
+  email: string;
+  password: string;
+}
+
+type TDirection = 'vertical' | 'horizontal';
+
+export type { Nullable, IDataState, TDirection, ILogin };