Format code and update comment section

hotel-management/src/App.tsx

@@ -3,7 +3,6 @@ import isPropValid from '@emotion/is-prop-valid';
 import { StyleSheetManager } from 'styled-components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useEffect, useMemo, useReducer } from 'react';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 // Components
 import AppLayout from './components/AppLayout';
@@ -72,7 +71,6 @@ function App() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
       <StyleSheetManager shouldForwardProp={shouldForwardProp}>
         <UserRoomAvailableContext.Provider value={store}>
           <BrowserRouter>

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

@@ -3,7 +3,6 @@ import { FormProvider, useForm } from 'react-hook-form';
 
 // Styled
 import Input from '@commonStyle/Input.ts';
-import { FormBtn } from './styled.ts';
 
 // Constants
 import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage.ts';
@@ -104,24 +103,24 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
             reset();
             onCloseModal?.();
 
-            // Update room in global state
-            // Old room
+            // Update room status in global state
+            // Reset status old room
             dispatch!({
               type: 'updateStatusRoom',
               payload: [{ id: booking!.rooms!.id, status: false }],
             });
 
-            // New room
+            // Change status new room
             dispatch!({
               type: 'updateStatusRoom',
               payload: [{ id: newBooking.roomId, status: true }],
             });
 
-            // Update room available in server
-            // Old room
+            // Update room status in server
+            // Reset status old room
             await updateRoomStatus(booking!.rooms!.id, false);
 
-            // New room
+            // Change status new room
             await updateRoomStatus(newBooking.roomId, true);
           },
         }
@@ -277,7 +276,7 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
         </Form.Row>
 
         <Form.Action>
-          <FormBtn
+          <Form.Button
             type="submit"
             name="submit"
             disabled={!isDirty || !isValid || isLoading}
@@ -287,10 +286,10 @@ const BookingForm = ({ onCloseModal, booking }: IBookingFormProp) => {
                 ? 'Add' 
                 : 'Save'
             }
-          </FormBtn>
-          <FormBtn type="button" variations="secondary" onClick={onCloseModal}>
+          </Form.Button>
+          <Form.Button type="button" variations="secondary" onClick={onCloseModal}>
             Close
-          </FormBtn>
+          </Form.Button>
         </Form.Action>
       </Form>
     </FormProvider>

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

@@ -29,7 +29,15 @@ 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 statusText = status 
     ? 'Check in' 
     : 'Check out';

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

@@ -20,8 +20,18 @@ import { useBookings } from '@hook/bookings/useBookings';
 import { TBookingResponse } from '@type/booking';
 
 const BookingTable = () => {
-  const columnName = ['User', 'Date', 'Room', 'Amount', 'Status'];
-  const { isLoading, bookings, count } = useBookings();
+  const columnName = [
+    'User',
+    'Date',
+    'Room',
+    'Amount',
+    'Status'
+  ];
+  const { 
+    isLoading,
+    bookings,
+    count
+  } = useBookings();
 
   const renderBookingRow = useCallback(
     (booking: TBookingResponse) => (

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

@@ -1,8 +1,5 @@
 import styled from 'styled-components';
 
-// Components
-import Button from '@commonStyle/Button';
-
 const StyledBooking = styled.main`
   padding: 20px;
   padding-bottom: 100px;
@@ -18,19 +15,10 @@ const Title = styled.h2`
   text-transform: capitalize;
 `;
 
-const FormBtn = styled(Button)`
-  width: 100%;
-
-  &:disabled,
-  &[disabled] {
-    background-color: var(--disabled-btn-color);
-  }
-`;
-
 const StyledOperationTable = styled.div`
   display: flex;
   gap: 30px;
   justify-content: flex-end;
 `;
 
-export { StyledBooking, Title, StyledOperationTable, FormBtn };
+export { StyledBooking, Title, StyledOperationTable };