The Wild Oasis

---

Hotel Management website.

📝 Table of Contents

• About
• Screen Shots
• Getting Started
• Usage
• Built Using
• License

🧐 About

"The Wild Oasis" Hotel Management App is a robust, user-friendly solution designed for hotel staff to streamline cabin management, bookings, and guest services. Prioritizing both security and simplicity, the app ensures that only authorized hotel employees can access and operate its features, enhancing operational efficiency and protecting sensitive information...

🧐 Features

1. User Authentication

   • New users can only sign up through the app, ensuring that only verified hotel employees can create accounts.

2. User Profile Management

   • Employees can personalize their profiles by uploading avatars, changing names, and updating passwords.

3. Cabin Management

   • A table view displays all cabins with details such as photos, names, capacity, price, and any current discounts.
   • Users can create new cabins, update or delete existing ones, and upload cabin photos.

4. Booking Management

   • A detailed table view showcases booking information, including arrival/departure dates, status, paid amount, cabin details, and guest data.
   • Bookings can be filtered by status: "unconfirmed," "checked in," or "checked out."
   • Users can check in or check out guests and delete bookings when necessary.

5. Payment Handling

   • At check-in, users can confirm payment receipt and manage booking payments.
   • Guests can opt to add breakfast for their stay during the check-in process.

6. Guest Data Management

   • The app stores detailed guest information, including full name, email, national ID, nationality, and country flag for easy identification.

7. Dashboard

   • The initial screen provides key data from the last 7, 30, or 90 days.
   • Displays a list of guests checking in and out on the current day, allowing users to handle related tasks.
   • Includes statistics on recent bookings, sales, check-ins, and occupancy rates.
   • Visual charts show daily hotel sales (including extras like breakfast) and statistics on guest stay durations.

8. Application-Wide Settings

   • Users can adjust settings such as breakfast price, minimum/maximum nights per booking, and maximum guest capacity per booking.

9. Dark Mode

   • A user-friendly dark mode feature improves visibility and reduces eye strain, particularly in low-light environments.

🚀 Live Demo Demo

📸 Screenshots

🚶‍➡️Login

🏠 Home Page

👜 Booking Page

ℹ️ Booking Details Page

🏠 Cabin Page

🌐 Create Cabin

➕ Create New User Page

⚙️ Update Account Page

⚙️ Settings Page

☀️ Light Mode Dashboard

🏁 Getting Started

To install this App follow the instructions below.

Prerequisites

npm and nodejs should be installed on your system.

Installing

1. to clone the repository run the following command

git clone https://github.com/abdalhamedemad/The-Wild-Oasis.git

2. to install the dependencies run the following command

npm install

3. to start the app run the following command

npm run dev

4. to start the Json Server run the following command

npm run server

🎈 Usage

after starting the app you can access the app on the following url

http://localhost:5173

⛏️ Built Using

• React - Web Framework
• React-Query - Data Fetching & Caching Library
• Vite - Build Tool
• React-Router - Routing Library
• supabase - Backed Server
• react-hook-form - Form Hook Library
• recharts - Charts Library
• react-toastify - Notification Library
• react-icons - Icon Library
• styled-components - Styling Library

📄 License

This project is licensed under the MIT License - see the LICENSE.md file for details.