An internal hotel management system allows employees to manage everything about hotel bookings, cabins, and guests.
-
User Authentication and Signup:
- Hotel employees can log in to the application to perform tasks.
- New users can only be signed up within the application to ensure that only actual hotel employees can create accounts.
-
User Profile Management:
- Users can upload an avatar to personalize their profile.
- Users can change their name and password.
-
Cabin Management:
- The app provides a table view with all cabins.
- The table view displays cabin information, including cabin photo, name, capacity, price, and current discount.
- Users can update or delete existing cabins.
- Users can create new cabins, including the ability to upload a photo.
-
Booking Management:
- The app provides a table view with all bookings.
- The table view displays booking information, including arrival and departure dates, booking status, paid amount, cabin details, and guest data.
- Booking status can be "unconfirmed," "checked in," or "checked out."
- The table view is filterable by booking status.
- Additional booking data includes the number of guests, number of nights, guest observations, and whether breakfast was booked and its price.
-
Booking Operations:
- Users can delete, check in, or check out a booking as the guest arrives.
- On check-in, users can accept payment outside the app and then confirm the payment within the app.
- Guests can add breakfast for the entire stay during check-in if they haven't already.
-
Guest Data Management:
- Guest data contains full name, email, national ID, nationality, and a country flag for easy identification.
-
Dashboard:
- The initial app screen serves as a dashboard displaying important information for the last 7, 30, or 90 days.
- It shows a list of guests checking in and out on the current day, and users can perform tasks related to these activities from the dashboard.
- The dashboard provides statistics on recent bookings, sales, check-ins, and occupancy rates.
- It includes a chart showing all daily hotel sales, distinguishing between "total" sales and "extras" sales (only breakfast at present).
- There's also a chart displaying statistics on stay durations, an important metric for the hotel.
-
Application-wide Settings:
- Users can define application-wide settings such as breakfast price, minimum and maximum nights per booking, and maximum guests per booking.
-
Dark Mode:
- The app includes a dark mode option for a different visual appearance and enhanced user experience in low-light conditions.
- React
- Supabase
- React Query
- React Router
- React Hook Form
- React Hot Toast
- Recharts
- TailwindCSS
- Phosphor Icons
- Vite
-
Clone the repository:
git clone https://github.com/ritiksharmarj/oasisresort.git
-
Navigate to the project directory:
cd oasisresort
-
Install the dependencies:
npm install
-
Set up the environment variables:
-
Duplicate
.env.example
file into.env
-
Add the supabase URL and key
-
This project is part of the online course I've taken at Udemy. Thanks to Jonas Schmedtmann for creating this awesome course!