# Hotel Management System - Complete UI/UX Structure Prompt

Design a modern, premium, responsive Hotel Management System Admin Panel using:

* Laravel Blade
* Tailwind CSS
* Alpine.js
* Livewire

Focus ONLY on Frontend UI Architecture, Page Structure, Components, Layouts, User Experience and Navigation.

Do NOT create Database Schema, Migrations, Models, Controllers, APIs, Business Logic or Backend Implementation.

---

## Design Requirements

Create a clean SaaS-style dashboard similar to:

* Cloudbeds
* Hotelogix
* Booking.com Extranet
* Airbnb Host Dashboard

Design Style:

* Modern
* Professional
* Hotel Industry Focused
* Responsive (Desktop + Tablet + Mobile)
* Minimal and Premium
* Consistent Component System

Use:

* Cards
* Stats Widgets
* Tables
* Modals
* Drawers
* Filters
* Dropdowns
* Tabs
* Calendar Views
* Status Badges
* Timeline Components

---

# Application Layout

Create:

### Left Sidebar Navigation

Logo Area

Menu:

* Dashboard
* Rooms
* Reservations
* Booking Calendar
* Guests
* Check-In
* Check-Out
* Invoices
* Housekeeping
* Maintenance
* Reports
* Users
* Settings

---

### Top Header

Include:

* Search Bar
* Notifications
* User Profile Dropdown
* Role Badge
* Quick Actions Button

---

# Login Page

Create a modern hotel-themed login page.

Sections:

### Left Side

* Hotel Illustration / Hero Image
* Welcome Text

### Right Side

Login Form

Fields:

* Email
* Password

Buttons:

* Login
* Forgot Password

Include:

* Validation States
* Loading State
* Remember Me
* Show Password Toggle

---

# Dashboard Page

Design Executive Overview Dashboard.

Top Statistics Cards:

* Total Rooms
* Occupied Rooms
* Available Rooms
* Arrivals Today
* Departures Today
* Revenue Today

Additional Widgets:

### Occupancy Overview

Progress Card

### Revenue Analytics

Chart Section

### Room Status Distribution

Visual Status Cards

### Recent Reservations

Latest Booking Table

### Today's Activities

Timeline Widget

---

# Room Management Page

Create:

### Page Header

* Add Room Button
* Filters
* Search

### Room Table

Columns:

* Room Number
* Room Type
* Floor
* Price
* Status
* Last Updated
* Actions

Status Badges:

* Available
* Occupied
* Reserved
* Maintenance

Create:

### Add/Edit Room Modal

Modern Slide-over Drawer UI

---

# Reservation Management

Create a dedicated booking management experience.

### Reservation List Page

Header:

* New Reservation
* Date Filters
* Search

Table:

* Booking ID
* Guest
* Room
* Check-In
* Check-Out
* Status
* Amount
* Actions

---

### Reservation Details Page

Sections:

Guest Information Card

Stay Information Card

Payment Summary Card

Special Notes Card

Activity Timeline

---

# Booking Calendar

Most Important Screen

Create Cloudbeds-style Reservation Calendar.

Use layout structure for:

### Left Panel

Rooms List

### Right Area

Reservation Calendar Grid

Room-wise horizontal calendar

Color Indicators:

* Green = Occupied
* Yellow = Reserved
* Red = Maintenance
* White = Available

Features:

* Drag & Drop Booking Blocks
* Hover Details
* Quick Booking Modal
* Date Navigation
* Month / Week / Day View Switch

---

# Guest Management

Create:

### Guest Directory Page

Search + Filters

Guest Table

Columns:

* Guest ID
* Name
* Email
* Phone
* Nationality
* Total Stays
* Last Visit
* Actions

---

### Guest Profile Page

Sections:

* Profile Card
* Contact Information
* Stay History
* Reservation Timeline
* Notes

---

# Check-In Interface

Create Reception-Friendly Screen.

Reservation Detail Card

Guest Summary

Room Information

Action Area:

Large Primary Button

CHECK-IN

Include:

* Verification Checklist
* Guest Notes
* Status Indicators

---

# Check-Out Interface

Create Quick Checkout Experience.

Sections:

Guest Information

Stay Summary

Charges Summary

Invoice Preview

Large Primary Button

CHECK-OUT

Include:

* Stay Duration Summary
* Billing Breakdown
* Final Confirmation Modal

---

# Invoice Module

Create:

### Invoice List Page

Search

Date Filters

Status Filters

Invoice Table

---

### Invoice Detail Page

Printable Invoice Layout

Professional Hotel Invoice Design

Sections:

* Hotel Information
* Guest Information
* Stay Information
* Charges Breakdown
* Taxes
* Total Amount

Include:

* Download PDF Button
* Print Button

---

# Housekeeping Module

Create Hotel Cleaning Dashboard.

Room Status Cards:

* Clean
* Dirty
* Inspecting
* Maintenance

Room Grid View

Room Table View

Filters:

* Floor
* Status
* Assigned Staff

Create Update Status Modal.

---

# Maintenance Module

Create Ticket Management Interface.

Top Cards:

* Open Tickets
* In Progress
* Completed
* Critical Issues

Table:

* Ticket ID
* Room Number
* Issue
* Priority
* Assigned To
* Status
* Created Date

Priority Badges:

* Low
* Medium
* High
* Critical

Create Ticket Details Drawer.

---

# Reports Module

Create Executive Reporting Dashboard.

Pages:

### Daily Operations Report

Cards:

* Occupied Rooms
* Available Rooms
* Check-Ins
* Check-Outs
* Revenue
* Occupancy Rate

Charts:

* Occupancy Trend
* Revenue Trend
* Room Performance

---

### Revenue Reports

Monthly Revenue Analytics

Yearly Comparison

Revenue Cards

Revenue Graphs

---

# User Management

Create Admin-only Interface.

User Table

Columns:

* Name
* Email
* Role
* Status
* Last Login
* Actions

Create:

* Add User Modal
* Edit User Modal
* Role Assignment UI

---

# Settings Module

Tabs:

* Hotel Information
* Branding
* Notifications
* Invoice Settings
* User Preferences

---

# Common Components

Create reusable UI components:

* Stat Cards
* Tables
* Data Filters
* Search Bars
* Status Badges
* Dropdown Menus
* Confirmation Modals
* Slide-over Drawers
* Empty States
* Loading Skeletons
* Toast Notifications
* Pagination
* Date Pickers
* Activity Timelines

---

# Responsive Requirements

Desktop First

Also support:

* Tablet Layout
* Mobile Layout

Sidebar collapsible on mobile.

Tables become responsive.

Calendar optimized for smaller screens.

---

# Output Required

Generate complete page-wise UI architecture with:

* Folder Structure
* Blade Layout Structure
* Reusable Components List
* Wireframe Hierarchy
* User Flow
* Navigation Flow
* Dashboard Layout Plan
* Reservation Calendar Layout Plan
* Mobile Responsiveness Plan

Focus entirely on professional UI/UX architecture and frontend structure.
Do not generate database schema or backend logic.
