Horizon Peaks - Hotel Management Application (Dashboard)

Horizon Peaks is a premium hotel management dashboard built specifically for a boutique hotel featuring eight luxurious wooden cabins. The application serves as the hotel's internal management system, allowing administrators and moderators to efficiently manage reservations, cabins, guests, settings, and day-to-day hotel operations through a modern Single Page Application.

The dashboard shares its database with the public-facing Horizon Peaks booking website, ensuring that both staff and guests always interact with synchronized, real-time data.

---

Project Overview

The primary goal of the dashboard is to centralize all hotel operations into a single, intuitive interface. From managing reservations and guest information to monitoring hotel performance and configuring business rules, the application provides staff with everything required to operate the property efficiently.

The system is designed around role-based permissions, fast data synchronization, and responsive user interactions powered by React and Supabase.

---

Core Features

Role-Based Access Control (RBAC)

The dashboard implements a secure permission system to separate administrator capabilities from moderator access.

Administrator Permissions

• Create user accounts
• Edit existing users
• Delete users
• Promote or demote moderators
• Access all administrative pages

Moderator Permissions

• View user accounts
• Manage hotel operations
• No access to user creation
• No permission to edit or delete users

Automatic Account Management

• New registrations are automatically confirmed
• New users receive the Moderator role by default
• The master account is permanently assigned the Admin role

---

Cabin Management

Hotel staff can manage every cabin available within the property.

Features

• View cabins in responsive layouts
• Create new cabins
• Duplicate existing cabins
• Edit cabin information
• Delete cabins
• Upload cabin images
• Manage pricing and discounts
• Configure guest capacity

---

Booking Management

The reservation management system provides complete control over guest bookings.

Features

• View all reservations
• Filter bookings by status
• Check guests in
• Check guests out
• Add breakfast packages
• Track booking payments
• View reservation history

Booking Statuses

• Unconfirmed
• Checked In
• Checked Out

---

Guest Management

The dashboard maintains detailed guest profiles to improve hotel operations.

Guest Information

• Full Name
• National ID
• Contact Information
• Nationality
• Country Flag
• Reservation History

---

Analytics Dashboard

Hotel performance is presented through interactive statistics and visual reports.

Dashboard Metrics

• Total bookings
• Revenue
• Occupancy rate
• Check-in rate
• Daily hotel sales
• Stay duration statistics

Available Time Ranges

• Last 7 Days
• Last 30 Days
• Last 90 Days

---

Global Settings

Administrators can configure hotel-wide business rules without modifying the codebase.

Configurable Settings

• Minimum booking nights
• Maximum booking nights
• Maximum guests per cabin
• Breakfast pricing
• Light theme
• Dark theme

---

Technology Stack

Category	Technology
Frontend	React
Routing	React Router v6
Styling	Styled Components
State Management	React Query
Forms	React Hook Form
Database	Supabase
Authentication	Supabase Auth
Storage	Supabase Storage
Charts	Recharts
Notifications	React Hot Toast
Utilities	date-fns
Icons	React Icons

---

Database Architecture

The dashboard communicates with a self-hosted Supabase instance that powers both the internal management system and the guest-facing website.

Main Tables

public.cabins

Stores:

• Cabin information
• Capacity
• Pricing
• Discounts
• Descriptions
• Image URLs

---

public.bookings

Stores:

• Reservation details
• Booking dates
• Guest associations
• Cabin associations
• Financial information
• Reservation status
• Custom requests

---

public.guests

Stores:

• Guest profiles
• Contact information
• Nationality
• Booking relationships

---

public.settings

Stores:

• Booking rules
• Breakfast pricing
• Application configuration

---

public.users_view

Provides secure access to authenticated dashboard users while protecting the underlying authentication tables.

---

SQL Functions

The application uses privileged SQL functions for secure administrative operations, including:

• User deletion
• User updates
• Permission-controlled account management

---

User Workflow

A typical hotel staff workflow consists of:

1. Sign into the dashboard.
2. View today's reservations.
3. Check arriving guests in.
4. Update booking details if necessary.
5. Manage cabin availability.
6. Configure hotel settings.
7. Monitor occupancy and revenue.
8. Check guests out at the end of their stay.

---

Performance & Architecture

The application focuses on responsiveness and efficient data management.

Architecture Highlights

• Single Page Application (SPA)
• Optimistic UI updates
• Cached server state
• Real-time database synchronization
• Shared backend with the guest website
• Modular component architecture
• Responsive layouts
• Secure role-based authorization

---

Integration

The dashboard shares its database with the Horizon Peaks Guest Website.

This shared architecture allows reservations made through the public booking platform to instantly appear within the management dashboard, enabling staff to manage bookings without manual synchronization or duplicate data entry.

---

Project Goals

• Simplify daily hotel operations
• Centralize reservation management
• Provide secure staff authentication
• Maintain synchronized guest and booking data
• Deliver real-time analytics
• Reduce administrative workload
• Support scalable hotel management through configurable business rules

---

Code Author: Ahmed Said