info-about-the-project.txt

How to plan a React application:
   1. Gather application requirements and features
   2. Divide the application into pages
   3. Divide the application into feature categories
   4. Decide on what libraries to use (technology decisions)

Project requirements from the business:
Authentication:
   - Users of the app are hotel employees. They need to be logged into the application to perform tasks
   - New users can only be signed up inside the applications (to guarantee that only actual hotel employees can get accounts)
   - Users should be able to upload an avatar, and change their name and password
Cabins:
   - App needs a table view with all cabins, showing the cabin photo, name, capacity, price, and current discount
   - Users should be able to update or delete a cabin, and to create new cabins (including uploading a photo)
Bookings:
   - App needs a table view with all bookings, showing arrival and departure dates, status, and paid amount, as well as cabin and guest data
   - The booking status can be "unconfirmed" (booked but not yet checked in), "checked in", or "checked out". The table should be filterable by this important status
   - Other booking data includes: number of guests, number of nights, guest observations, whether they booked breakfast, breakfast price
Check in / out:
   - Users should be able to delete, check in, or check out a booking as the guest arrives (no editing necessary for now)
   - Bookings may not have been paid yet on guest arrival. Therefore, on check in, users need to accept payment (outside the app), and then confirm that payment has been received (inside the app)
   - On check in, the guest should have the ability to add breakfast for the entire stay, if they hadn't already
Guests:
   - Guest data should contain: full name, email, national ID, nationality, and a country flag for easy identification
Dashboard:
   - The initial app screen should be a dashboard, to display important information for the last 7, 30, or 90 days:
      - A list of guests checking in and out on the current day. Users should be able to perform these tasks from here
      - Statistics on recent bookings, sales, check ins, and occupancy rate
      - A chart showing all daily hotel sales, showing both "total" sales and "extras" sales (only breakfast at the moment)
      - A chart showing statistics on stay durations, as this is an important metric for the hotel
Settings:
   - Users should be able to define a few application-wide settings: breakfast price, min and max nights/booking, max guests/booking
- App needs a dark mode

Feature categories + necessary pages
                  /dashboard
Bookings          /bookings
Cabins            /cabins
Guests            -
Dashboard
Check in and out  /checkin/:bookingID
App settings      /settings
Authentication    /users (user sign up)
                  /login (login)
                  /account (account settings)

Technology decisions:
- Routing: React Router
- Styling: styled components
- Remote state management: React Query
- UI State management: Context API
- Form management: React Hook Form
- Other tools: React icons / React hot toast / Recharts / date-fns / Supabase

Modeling global remote state:
State Domains / feature categories
Bookings:      Bookings / Dashboard / Check in and out
Cabins:        Cabins
Guests:        Guests
Settings:      App settings
Users:         Authentication


Ideas for additional features:
- creating new bookings right from the application
- editing a booking
- add check in and check out times
- allow users to add different cabin prices for different days 
- add a restaurant: a page where user register a bill value each time the guest goes to the restaurant and then at checkout that bill need to be paid. And then we don't just checkout people, but lead to a page where we can print a PDF with an invoice that we can email to the guest.