Hot fixed and format code

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

@@ -10,8 +10,8 @@ import { Main, StyledAppLayout } from './styled';
 const AppLayout = () => {
   return (
     <StyledAppLayout>
-      <Header accountName='Admin'/>
-      <Sidebar heading='Hotel Management'/>
+      <Header accountName="Admin" />
+      <Sidebar heading="Hotel Management" />
       <Main>
         <Outlet />
       </Main>

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

@@ -5,10 +5,10 @@ import HeaderMenu from '../HeaderMenu';
 import { StyledHeader } from './styled';
 
 interface IHeader {
-  accountName: string
+  accountName: string;
 }
 
-const Header = ({accountName}: IHeader) => {
+const Header = ({ accountName }: IHeader) => {
   return (
     <StyledHeader>
       <p>Hi, {accountName}!</p>

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

@@ -33,9 +33,7 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
 
-    openId === '' || openId !== id 
-      ? open!(id) 
-      : close!();
+    openId === '' || openId !== id ? open!(id) : close!();
   };
 
   return (

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

@@ -8,7 +8,7 @@ interface ISidebar {
   heading: string;
 }
 
-const Sidebar = ({heading}: ISidebar) => {
+const Sidebar = ({ heading }: ISidebar) => {
   return (
     <StyledSidebar>
       <Heading>{heading}</Heading>

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

@@ -6,7 +6,7 @@ import { StyledBody, StyledHeader, StyledRow, StyledTable } from './styled';
 // Contexts
 import TableContext from '../../contexts/TableContext';
 
-interface ITable {
+export interface ITable {
   columns?: string;
   children: React.ReactNode;
 }

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

@@ -1,7 +1,5 @@
 import styled from 'styled-components';
-
-// Interfaces
-import { ITable } from '../../globals/interfaces';
+import { ITable } from '.';
 
 const StyledTable = styled.div`
   border: 1px solid var(--border-color);

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

@@ -1,17 +1,29 @@
-import { DefaultToastOptions, ToastOptions, ToastPosition, Toaster } from 'react-hot-toast';
+import {
+  DefaultToastOptions,
+  ToastOptions,
+  ToastPosition,
+  Toaster,
+} from 'react-hot-toast';
 import { CSSProperties } from 'styled-components';
 
 interface IToast {
-  position: ToastPosition;
-  gutter: number;
-  containerStyle: CSSProperties;
-  toastOptions: DefaultToastOptions;
-  success: ToastOptions;
-  error: ToastOptions;
-  style: CSSProperties | undefined;
+  position?: ToastPosition;
+  gutter?: number;
+  containerStyle?: CSSProperties;
+  toastOptions?: DefaultToastOptions;
+  success?: ToastOptions;
+  error?: ToastOptions;
+  style?: CSSProperties | undefined;
 }
 
-const Toast = ({position, gutter, containerStyle, success, error, style}: IToast) => {
+const Toast = ({
+  position,
+  gutter,
+  containerStyle,
+  success,
+  error,
+  style,
+}: IToast) => {
   return (
     <Toaster
       position={position}
@@ -20,27 +32,27 @@ const Toast = ({position, gutter, containerStyle, success, error, style}: IToast
       toastOptions={{
         success,
         error,
-        style
+        style,
       }}
     />
   );
 };
 
 Toast.defaultProps = {
-  position: "top-center",
+  position: 'top-center',
   gutter: 12,
   containerStyle: { margin: '8px', zIndex: 1 },
   success: {
     duration: 3000,
   },
-  error:{
+  error: {
     duration: 5000,
   },
   style: {
     fontSize: '16px',
     maxWidth: '500px',
     padding: '16px 24px',
-  }
-}
+  },
+};
 
 export default Toast;

hotel-management/src/helpers/utils.ts

@@ -124,7 +124,7 @@ const searchQuery = (
   columnSearch: string,
   keySearch: string,
   sort: string,
-  order: string
+  order: string,
 ) => {
   // prettier-ignore
   const phoneParams = keySearch

hotel-management/src/hooks/useFetch.ts

@@ -23,7 +23,7 @@ const useFetch = (
   keyWord: string = '',
   tempSortBy?: string,
   tempOrderBy?: string,
-  reload?: boolean
+  reload?: boolean,
 ) => {
   const [data, setData] = useState(null);
   const [isPending, setIsPending] = useState(false);
@@ -56,7 +56,7 @@ const useFetch = (
 
         if (!response.ok)
           throw new Error(
-            `Error code: ${response.status} \n Messages: ${response.statusText}`
+            `Error code: ${response.status} \n Messages: ${response.statusText}`,
           );
 
         setIsPending(false);

hotel-management/src/hooks/useForm.ts

@@ -21,7 +21,7 @@ const useForm = (
   stateSchema = {},
   stateValidatorSchema = {} as TValidator,
   submitFormCallback: (values: TKeyValue) => void,
-  initialValue: string = ''
+  initialValue: string = '',
 ) => {
   const [values, setValues] = useState<TKeyValue>(INITIAL_STATE_SCHEMA);
   const [errors, setErrors] = useState(getPropValues(stateSchema, ERROR));
@@ -73,7 +73,7 @@ const useForm = (
 
       return error;
     },
-    [stateValidatorSchema]
+    [stateValidatorSchema],
   );
 
   // Set Initial Error State
@@ -86,10 +86,10 @@ const useForm = (
           [name]: !initialValue // Skip error when initialValue have values
             ? validateFormFields(name, values[name] as string)
             : '',
-        }))
+        })),
       );
     },
-    [errors, values, validateFormFields]
+    [errors, values, validateFormFields],
   );
 
   // Used to disable submit button if there's a value in errors
@@ -98,7 +98,7 @@ const useForm = (
   // in every re-render in component
   const validateErrorState = useCallback(
     () => Object.values(errors).some((error) => error),
-    [errors]
+    [errors],
   );
 
   // For every changed in our state this will be fired
@@ -114,7 +114,7 @@ const useForm = (
     (
       event: ChangeEvent<
         HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
-      >
+      >,
     ) => {
       setIsDirty(true);
 
@@ -136,7 +136,7 @@ const useForm = (
       setErrors((prevState) => ({ ...prevState, [name]: error }));
       isValid((prevState) => ({ ...prevState, [name]: true }));
     },
-    [validateFormFields]
+    [validateFormFields],
   );
 
   const handleOnSubmit = useCallback(
@@ -152,7 +152,7 @@ const useForm = (
         setDisable(true);
       }
     },
-    [validateErrorState, submitFormCallback, values]
+    [validateErrorState, submitFormCallback, values],
   );
 
   return {

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

@@ -1,7 +1,7 @@
 import { forwardRef, useEffect } from 'react';
 
 // Components
-import  Dialog, { IDialogProps } from '../../components/Dialog';
+import Dialog, { IDialogProps } from '../../components/Dialog';
 import RoomForm from './Form';
 
 // Types