Hotel Management UI Improvement Proposals¶
Document Version: 1.0
Date: November 26, 2025
Module: tqweb-adm/hotelmgmt.html
Author: Development Team
Table of Contents¶
- Executive Summary
- Current State Analysis
- Identified Problems
- Proposed Improvements
- Hotel Info Tab Redesign
- Rooms Tab Redesign
- Rate Editor Dialog Redesign
- Promotions Tab Redesign
- Hotel Calendar Dialog Redesign
- Search Results Redesign
- Implementation Priority
- Appendix: Current Page Structure
Executive Summary¶
This document outlines UI/UX improvements for the Hotel Management module (hotelmgmt.html). The current interface, while functional, presents usability challenges including information overload, inconsistent spacing, deep nesting of controls, and limited mobile responsiveness.
The proposed changes focus on: - Progressive disclosure - showing only relevant information at each step - Visual hierarchy - making important actions and data stand out - Reduced cognitive load - grouping related fields and simplifying complex forms - Better scanning - replacing tables with cards where appropriate
All proposals maintain existing functionality while improving user experience.
Current State Analysis¶
Page Structure¶
┌─────────────────────────────────────────────────────────────────────────────┐
│ HEADER │
├─────────────────┬───────────────────────────────────────────────────────────┤
│ LEFT SIDEBAR │ MAIN CONTENT AREA │
│ (2/12 cols) │ (10/12 cols) │
│ │ │
│ ┌─────────────┐ │ ┌─────────────────────────────────────────────────────┐ │
│ │ Search │ │ │ TABS: Hotel Info | Rooms Info | Hotel Promotions │ │
│ │ Accordion │ │ ├─────────────────────────────────────────────────────┤ │
│ │ - Check-in │ │ │ │ │
│ │ - Check-out │ │ │ [Hotel Info Tab - 20+ fields in grid] │ │
│ │ - Adults │ │ │ │ │
│ │ - Children │ │ │ OR │ │
│ │ - Meals │ │ │ │ │
│ │ - Margin │ │ │ [Rooms Tab - Room selector + calendar grid] │ │
│ │ - Area │ │ │ │ │
│ │ - Budget │ │ │ OR │ │
│ │ - Market │ │ │ │ │
│ │ └─ Search │ │ │ [Promotions Tab - Complex nested tables] │ │
│ ├─────────────┤ │ │ │ │
│ │ Hotels List │ │ └─────────────────────────────────────────────────────┘ │
│ │ by Area │ │ │
│ │ (Accordion) │ │ │
│ └─────────────┘ │ │
├─────────────────┴───────────────────────────────────────────────────────────┤
│ FOOTER │
└─────────────────────────────────────────────────────────────────────────────┘
Technical Details¶
| Aspect | Current Implementation |
|---|---|
| HTML | ~1,450 lines |
| JavaScript | ~1,430 lines (hotelmgmt.js) |
| CSS Framework | Foundation 6.8.1 |
| JS Framework | jQuery 3.7.1 |
| Dialogs | 10 Foundation Reveal modals |
| Form Fields | 50+ input fields across all tabs |
Identified Problems¶
| Issue | Location | Impact | Severity |
|---|---|---|---|
| Information overload | Hotel Info tab | 20+ fields visible simultaneously overwhelm users | High |
| Inconsistent spacing | Throughout | Mix of grid-padding-x, grid-smpadding-x, grid-margin-x creates visual noise |
Medium |
| Deep nesting | Promotions tab | 3-level nested tables are difficult to scan and understand | High |
| Small touch targets | Calendar cells | Rate cells are ~40px wide, problematic on touch devices | Medium |
| No visual hierarchy | All tabs | All fields appear equally important; no emphasis on primary actions | High |
| Modal overload | Various | 10 different dialogs cause context switching and disorientation | Medium |
| Duplicate controls | Rate editing | Same rate type dropdowns repeated 6 times in one form | Medium |
| Hidden actions | Toolbar buttons | "Add New", "Meal plans", "Rates" buttons compete for attention | Low |
| Dense calendar | Hotel calendar dialog | 31 columns + room names forces horizontal scrolling | High |
| No empty states | Room selection | Dropdown appears empty when no rooms configured; no guidance | Low |
| Limited mobile support | Entire page | Layout breaks on screens < 1024px | Medium |
Proposed Improvements¶
1. Hotel Info Tab Redesign¶
Current State¶
All 20+ fields displayed in a flat grid layout with no grouping or hierarchy.
Proposed Design¶
Group fields into collapsible sections with logical organization.
┌─────────────────────────────────────────────────────────────────────────────┐
│ 🏨 Hilton Dubai Marina [★★★★★] [Save]│
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ BASIC INFORMATION ─────────────────────────────────────────────────── ▼ ┐
│ │ │
│ │ Full Name: [Hilton Dubai Marina ] Code: [HLTDXB ] │
│ │ Short Name: [Hilton Marina ] Product ID: [142] │
│ │ │
│ │ Country: [UAE ▼] City: [Dubai ] Area: [Dubai ▼] │
│ │ │
│ └──────────────────────────────────────────────────────────────────────────┘
│ │
│ ┌─ GUEST POLICIES ────────────────────────────────────────────────────── ▼ ┐
│ │ │
│ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ │ Infant Age │ │ Child Age │ │ Check-in │ │ Check-out │ │
│ │ │ [ 2 ] │ │ [ 12 ] │ │ [15:00] │ │ [12:00] │ │
│ │ │ years │ │ years │ │ │ │ │ │
│ │ └──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │
│ │ Release Days: [ 3 ] ☑ Direct Contract ☐ DMC Booking │
│ │ │
│ └──────────────────────────────────────────────────────────────────────────┘
│ │
│ ┌─ FEES & TERMS ──────────────────────────────────────────────────────── ▼ ┐
│ │ │
│ │ Service Fees: AED [ 50.00 ] │
│ │ Fee Description: [Tourism Dirham - per room per night ] │
│ │ │
│ │ Terms & Conditions: │
│ │ ┌──────────────────────────────────────────────────────────────────┐ │
│ │ │ Cancellation policy: 72 hours prior to arrival... │ │
│ │ └──────────────────────────────────────────────────────────────────┘ │
│ │ │
│ └──────────────────────────────────────────────────────────────────────────┘
│ │
│ ┌─ DESCRIPTION & CONTACTS ────────────────────────────────────────────── ▾ ┐
│ │ (collapsed - click to expand) │
│ └──────────────────────────────────────────────────────────────────────────┘
│ │
│ [Add New Hotel] [Meal Plans] [Rates]
└─────────────────────────────────────────────────────────────────────────────┘
Key Changes¶
- Header with context - Hotel name and star rating prominently displayed
- Collapsible sections - Fields grouped into:
- Basic Information (always expanded)
- Guest Policies
- Fees & Terms
- Description & Contacts (collapsed by default)
- Card-style inputs - Numerical values (ages, times) displayed in card format for visual distinction
- Action buttons relocated - Primary actions moved to bottom-right following standard UX patterns
- Visual hierarchy - Section headers clearly distinguish field groups
2. Rooms Tab Redesign¶
Current State¶
Single dropdown to select rooms, scattered controls, and a calendar grid that requires scrolling.
Proposed Design¶
Room cards with inline mini-calendars and contextual actions.
┌─────────────────────────────────────────────────────────────────────────────┐
│ ROOMS [+ Add Room] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─ Filter ──────────────────────────────────────────────────────────────┐ │
│ │ Market: (•) UAE ( ) GCC ( ) ROW Date Range: [01-12-2025] → [31-12-2025] │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ DELUXE KING ROOM [Edit ▼] ││
│ │ Sea view, 45 sqm ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ Occupancy: 👤👤 + 👶 (2 adults + 1 child) Extra Bed: ✓ Available ││
│ │ Bedding: 1 King bed or 2 Twin beds ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ ││
│ │ DEC 2025 1 2 3 4 5 6 7 ││
│ │ ───────────────────────────────────────────────────── ││
│ │ Base Rate 450 450 450 550 550 450 450 ← Weekends gold ││
│ │ Status ✓ ✓ ✓ ✓ ✓ ✓ ✓ ││
│ │ ││
│ │ [◀ Prev Week] [Show Month] [Next Week ▶] ││
│ │ ││
│ │ [Set Pricing] [Copy Rates From...] [Quick Edit] [Bulk Status ▼] ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ SUPERIOR TWIN ROOM [Edit ▼] ││
│ │ Garden view, 38 sqm ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ Occupancy: 👤👤 (2 adults max) Extra Bed: ✗ None ││
│ │ Bedding: 2 Twin beds ││
│ ├─────────────────────────────────────────────────────────────────────────┤│
│ │ (Calendar collapsed - click to expand) ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
│ ┌─────────────────────────────────────────────────────────────────────────┐│
│ │ FAMILY SUITE [Edit ▼] ││
│ │ ... ││
│ └─────────────────────────────────────────────────────────────────────────┘│
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Key Changes¶
- Room cards - Replace dropdown with visible cards for all rooms
- At-a-glance information - Occupancy, bedding, and extra bed status visible without clicking
- Inline mini-calendar - Weekly view by default, expandable to full month
- Unified filter bar - Market and date range filter applies to all room cards
- Contextual actions - Actions grouped per room card
- Collapsible calendars - Only expanded room shows calendar to reduce clutter
- Status icons - Replace color-coded cells with universal icons (✓, ✗, ⏸)
3. Rate Editor Dialog Redesign¶
Current State¶
A single large modal with 30+ fields visible simultaneously.
Proposed Design¶
Step-based wizard with progressive disclosure.
Step 1: Date Selection¶
┌─────────────────────────────────────────────────────────────────────────────┐
│ SET ROOM PRICING [X] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 1.DATES │ ──▶ │ 2.RATES │ ──▶ │ 3.MEALS │ ──▶ │4.REVIEW │ │
│ │ ● │ │ ○ │ │ ○ │ │ ○ │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ═══════════════════════════════════════════════════════════════════════════ │
│ │
│ STEP 1: SELECT DATE RANGE │
│ │
│ ┌─────────────────────────────┐ ┌─────────────────────────────┐ │
│ │ STAY PERIOD │ │ BOOKING WINDOW │ │
│ │ │ │ │ │
│ │ From: [01-01-2025] │ │ From: [01-11-2024] │ │
│ │ To: [31-03-2025] │ │ To: [31-12-2024] │ │
│ │ │ │ │ │
│ │ ☐ Mon ☐ Tue ☐ Wed ☐ Thu │ │ Promo Code: [WINTER25 ] │ │
│ │ ☑ Fri ☑ Sat ☐ Sun │ │ │ │
│ │ (Holiday days) │ │ │ │
│ └─────────────────────────────┘ └─────────────────────────────┘ │
│ │
│ Market: ( ) UAE (•) GCC ( ) ROW │
│ │
│ Room Status: (•) Available ( ) Stop Sale ( ) On Request │
│ │
│ │
│ [Cancel] [Next Step →] │
└─────────────────────────────────────────────────────────────────────────────┘
Step 2: Rate Configuration¶
┌─────────────────────────────────────────────────────────────────────────────┐
│ SET ROOM PRICING [X] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 1.DATES │ ──▶ │ 2.RATES │ ──▶ │ 3.MEALS │ ──▶ │4.REVIEW │ │
│ │ ✓ │ │ ● │ │ ○ │ │ ○ │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ═══════════════════════════════════════════════════════════════════════════ │
│ │
│ STEP 2: SET RATES │
│ │
│ Rate Base: (•) Double ( ) Single ( ) Triple ( ) Quad │
│ Meal Base: [Bed & Breakfast ▼] │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ │ NORMAL DAYS │ HOLIDAY DAYS │ Type │ │
│ │──────────────┼───────────────────┼────────────────────┼─────────────│ │
│ │ Room Rate │ AED [ 450.00 ] │ AED [ 550.00 ] │ [Absolute▼] │ │
│ │ Extra Bed │ AED [ 100.00 ] │ AED [ 100.00 ] │ [Absolute▼] │ │
│ │ Add. Adult │ AED [ 75.00 ] │ AED [ 90.00 ] │ [Add to ▼] │ │
│ │ Add. Child │ AED [ 50.00 ] │ AED [ 60.00 ] │ [Add to ▼] │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ Min. Length of Stay: Normal [ 1 ] nights Holiday [ 2 ] nights │
│ │
│ [← Back] [Cancel] [Next Step →] │
└─────────────────────────────────────────────────────────────────────────────┘
Step 3: Meal Supplements¶
┌─────────────────────────────────────────────────────────────────────────────┐
│ SET ROOM PRICING [X] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 1.DATES │ ──▶ │ 2.RATES │ ──▶ │ 3.MEALS │ ──▶ │4.REVIEW │ │
│ │ ✓ │ │ ✓ │ │ ● │ │ ○ │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ═══════════════════════════════════════════════════════════════════════════ │
│ │
│ STEP 3: MEAL SUPPLEMENTS │
│ │
│ Configure supplements for upgrading from base meal plan (B&B) │
│ │
│ ┌─────────────────────────────────────────────────────────────────────┐ │
│ │ Meal Plan │ Adult (Normal) │ Adult (Hol.) │ Child Rate │ │
│ │─────────────────┼──────────────────┼────────────────┼───────────────│ │
│ │ Half Board │ AED [ 35.00 ] │ AED [ 35.00 ] │ AED [ 20.00] │ │
│ │ Full Board │ AED [ 65.00 ] │ AED [ 65.00 ] │ AED [ 40.00] │ │
│ │ All Inclusive │ AED [ 120.00 ] │ AED [120.00 ] │ AED [ 75.00] │ │
│ │ AI Plus │ AED [ 180.00 ] │ AED [180.00 ] │ AED [100.00] │ │
│ └─────────────────────────────────────────────────────────────────────┘ │
│ │
│ 💡 Supplements are per person per night, added to room rate │
│ │
│ [← Back] [Cancel] [Next Step →] │
└─────────────────────────────────────────────────────────────────────────────┘
Step 4: Review & Save¶
┌─────────────────────────────────────────────────────────────────────────────┐
│ SET ROOM PRICING [X] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 1.DATES │ ──▶ │ 2.RATES │ ──▶ │ 3.MEALS │ ──▶ │4.REVIEW │ │
│ │ ✓ │ │ ✓ │ │ ✓ │ │ ● │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ ═══════════════════════════════════════════════════════════════════════════ │
│ │
│ STEP 4: REVIEW & SAVE │
│ │
│ ┌─ SUMMARY ───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Room: Deluxe King Room │ │
│ │ Market: GCC │ │
│ │ Stay Period: Jan 1 - Mar 31, 2025 (90 days) │ │
│ │ Book Window: Nov 1 - Dec 31, 2024 │ │
│ │ Status: Available │ │
│ │ │ │
│ │ Base Rate: AED 450.00 (normal) / AED 550.00 (Fri-Sat) │ │
│ │ Extra Bed: AED 100.00 │ │
│ │ Min. Stay: 1 night (normal) / 2 nights (holiday) │ │
│ │ │ │
│ │ Meal Plans: 4 supplements configured │ │
│ │ │ │
│ └──────────────────────────────────────────────────────────────────────┘ │
│ │
│ ☑ Save and close ☐ Save and create another period │
│ │
│ [← Back] [Cancel] [Save Rates] │
└─────────────────────────────────────────────────────────────────────────────┘
Key Changes¶
- Progressive disclosure - Only 5-8 fields visible per step instead of 30+
- Visual progress indicator - Users know where they are in the process
- Logical grouping - Related fields together (dates, rates, meals)
- Day-of-week selection - Visual checkboxes for holiday days instead of dropdown
- Cleaner rate table - Aligned columns with type selector per row
- Summary review - Confirm all settings before saving
- Continue option - "Save and create another" for batch entry
4. Promotions Tab Redesign¶
Current State¶
Nested tables with inline editing, difficult to scan and understand relationships.
Proposed Design¶
Master-detail layout with promotion list and detail panel.
┌─────────────────────────────────────────────────────────────────────────────┐
│ PROMOTIONS [+ Create Promotion]│
├────────────────────────────────────┬────────────────────────────────────────┤
│ ACTIVE PROMOTIONS │ PROMOTION DETAILS │
│ │ │
│ ┌────────────────────────────────┐ │ ┌────────────────────────────────────┐ │
│ │ ☑ EBCD-WINTER25 [ROW]│◀│ │ EARLY BIRD WINTER 2025 │ │
│ │ Stay 3, Pay 2 │ │ │ │ │
│ │ Book: Nov 1 - Nov 30 │ │ │ Code: EBCD-WINTER25 │ │
│ │ Stay: Nov 1 - Dec 25 │ │ │ Priority: 1 │ │
│ │ ⋮ ▼ │ │ │ Min Stay: 3 nights │ │
│ └────────────────────────────────┘ │ │ │ │
│ │ │ ───────────────────────────────── │ │
│ ┌────────────────────────────────┐ │ │ │ │
│ │ ☑ SUMMER-FB [GCC]│ │ │ RATE ADJUSTMENTS │ │
│ │ Free Half Board Upgrade │ │ │ │ │
│ │ Book: May 1 - Jun 30 │ │ │ Base Rate: -15% │ │
│ │ Stay: Jun 1 - Aug 31 │ │ │ Adult Supp: No change │ │
│ │ ⋮ ▼ │ │ │ Child Supp: -20% │ │
│ └────────────────────────────────┘ │ │ Weekend Rate: -10% │ │
│ │ │ │ │
│ ┌────────────────────────────────┐ │ │ ───────────────────────────────── │ │
│ │ ☐ FLASH-DXB [UAE]│ │ │ │ │
│ │ (Inactive) │ │ │ APPLIES TO ROOMS (4 of 12) │ │
│ │ 48 Hour Flash Sale │ │ │ │ │
│ │ ⋮ ▼ │ │ │ ☑ Deluxe King Room │ │
│ └────────────────────────────────┘ │ │ ☑ Deluxe Twin Room │ │
│ │ │ ☑ Superior King Room │ │
│ │ │ ☑ Superior Twin Room │ │
│ Filter: [All Markets ▼] │ │ ☐ Family Suite │ │
│ [Active Only ☑] │ │ ☐ Presidential Suite │ │
│ │ │ ... │ │
│ │ │ │ │
│ │ │ [Edit Promotion] [Deactivate] │ │
│ │ └────────────────────────────────────┘ │
└────────────────────────────────────┴────────────────────────────────────────┘
Key Changes¶
- Master-detail pattern - List on left, details on right
- Promotion cards - Key info visible at a glance (code, name, dates, market)
- Market badge - Visual indicator for target market
- Active/inactive states - Checkbox indicates status, grayed out for inactive
- Room selection - Checkboxes in detail panel instead of nested table
- Filter controls - Market and status filters at bottom of list
- Contextual actions - Edit/Deactivate buttons in detail panel
5. Hotel Calendar Dialog Redesign¶
Current State¶
31-column table requiring horizontal scrolling, all rooms visible simultaneously.
Proposed Design¶
Weekly heatmap view with room selector.
┌─────────────────────────────────────────────────────────────────────────────┐
│ RATE CALENDAR - December 2025 [X] │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Market: [UAE ▼] [◀ Nov] December 2025 [Jan ▶] │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐│
│ │ SUN MON TUE WED THU FRI SAT ││
│ │ ───────────────────────────────────────── ││
│ │ Wk48 1 2 3 4 5 6 ││
│ │ Wk49 7 8 9 10 11 12 13 ││
│ │ Wk50 14 15 16 17 18 19 20 ││
│ │ Wk51 21 22 23 24 25 26 27 ││
│ │ Wk52 28 29 30 31 ││
│ └────────────────────────────────────────────────────────────────────────┘│
│ │
│ ROOM: [Deluxe King Room ▼] │
│ │
│ ┌────────────────────────────────────────────────────────────────────────┐│
│ │ SUN MON TUE WED THU FRI SAT ││
│ │ ───────────────────────────────────────── ││
│ │ Wk48 ███ ███ ███ ███ ░░░ ░░░ ███ = 450 ││
│ │ 450 450 450 450 550 550 ░░░ = 550 (wknd) ││
│ │ ▓▓▓ = Stop Sale ││
│ │ Wk49 ███ ███ ███ ███ ███ ░░░ ░░░ ▒▒▒ = On Request ││
│ │ 450 450 450 450 450 550 550 ││
│ │ ││
│ │ Wk50 ███ ███ ███ ███ ███ ▓▓▓ ▓▓▓ Click cell for ││
│ │ 450 450 450 450 450 SS SS full breakdown ││
│ │ ││
│ │ Wk51 ███ ███ ███ ▓▓▓ ▓▓▓ ▓▓▓ ▓▓▓ ││
│ │ 450 450 450 SS SS SS SS ││
│ │ (Christmas block) ││
│ │ ││
│ │ Wk52 ░░░ ░░░ ░░░ ░░░ ││
│ │ 600 600 600 600 ││
│ │ (New Year rates) ││
│ └────────────────────────────────────────────────────────────────────────┘│
│ │
│ [Show All Rooms] [Export to Excel] [Close] │
└─────────────────────────────────────────────────────────────────────────────┘
Key Changes¶
- Weekly rows - 7 columns instead of 31, fits on any screen
- Color-coded heatmap - Visual legend for rate levels and statuses
- Single room focus - Dropdown to select room, reduces visual noise
- Month mini-calendar - Reference calendar at top for context
- Pattern annotations - Labels for special periods (Christmas, New Year)
- Export functionality - Generate rate sheets for external use
- All rooms toggle - Option to view compact multi-room summary
6. Search Results Redesign¶
Current State¶
Accordion per hotel containing a table of rooms.
Proposed Design¶
Card-based results enabling easy comparison.
┌─────────────────────────────────────────────────────────────────────────────┐
│ SEARCH RESULTS │
│ 2 Adults, 0 Children | Dec 15-18, 2025 (3 nights) | B&B | Dubai │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ Sort: [Price ▼] Filter: [All Areas ▼] [All Stars ▼] 12 hotels found │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ ★★★★★ HILTON DUBAI MARINA │ │
│ │ Dubai Marina from │ │
│ │ │ │
│ │ ┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ │ │
│ │ │ Deluxe King │ │ Deluxe Twin │ │ Junior Suite │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 👤👤 + 👶 │ │ 👤👤 │ │ 👤👤👤 + 👶 │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ AED 1,485 │ │ AED 1,350 │ │ AED 2,100 │ │ │
│ │ │ (495/night) │ │ (450/night) │ │ (700/night) │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ [Breakdown] │ │ [Breakdown] │ │ [Breakdown] │ │ │
│ │ │ [ Book ] │ │ [ Book ] │ │ [ Book ] │ │ │
│ │ └─────────────────┘ └─────────────────┘ └─────────────────┘ │ │
│ │ │ │
│ │ ⚠ Min. 2 nights required for Junior Suite on weekends │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
│ ┌───────────────────────────────────────────────────────────────────────┐ │
│ │ ★★★★ JUMEIRAH BEACH HOTEL │ │
│ │ Jumeirah │ │
│ │ ... │ │
│ └───────────────────────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
Key Changes¶
- Search summary header - Criteria displayed for reference
- Sort and filter controls - Easy access to refine results
- Hotel cards - Clear visual separation between properties
- Horizontal room cards - Side-by-side comparison within hotel
- Occupancy icons - Quick visual for room capacity
- Per-night pricing - Total and nightly rate both visible
- Prominent warnings - MLOS and other restrictions highlighted
- Star rating badge - Easy to identify hotel category
Implementation Priority¶
| Priority | Component | Effort | Impact |
|---|---|---|---|
| High | Hotel Info Tab - Collapsible sections | Medium | High |
| High | Rooms Tab - Card layout | High | High |
| High | Rate Editor - Wizard steps | High | High |
| Medium | Promotions Tab - Master-detail | Medium | Medium |
| Medium | Hotel Calendar - Weekly heatmap | Medium | Medium |
| Medium | Search Results - Card layout | Low | Medium |
| Low | Consistent spacing/design system | Low | Medium |
| Low | Mobile responsiveness | High | Low |
Recommended Implementation Order¶
- Phase 1 - Hotel Info Tab collapsible sections (quick win, high visibility)
- Phase 2 - Rate Editor wizard (reduces user errors, training time)
- Phase 3 - Rooms Tab card layout (biggest structural change)
- Phase 4 - Promotions and Calendar improvements
- Phase 5 - Search results and polish
Appendix: Current Page Structure¶
HTML Structure Reference¶
hotelmgmt.html
├── <header> - Page header (loaded from template)
├── <section role="dialog"> - Modal dialogs
│ ├── #dialog_tiny - Generic tiny dialog
│ ├── #confirm_dialog - Confirmation prompts
│ ├── #hotelmeals-dialog - Meal plan editor
│ ├── #breakdown-dialog - Price breakdown viewer
│ ├── #dialog_small - Room info display
│ ├── #newroom-dialog - New room form
│ ├── #quickcal_dialog - Quick rate editor
│ ├── #newcal-dialog - Full rate editor (largest)
│ ├── #hotelcal-dialog - Hotel calendar view
│ └── #bookroom-dialog - Booking form
├── <div.grid-container> - Main content
│ ├── #hotelmenu_div - Left sidebar
│ │ ├── #hotelsearch - Search accordion
│ │ └── #hotelmenu - Hotels list accordion
│ ├── #hoteldata_div - Main tabs container
│ │ ├── #hotel-panel - Hotel Info tab
│ │ ├── #rooms-panel - Rooms tab
│ │ └── #promo-panel - Promotions tab
│ └── #searchres_div - Search results container
├── #req_msg_div - Message/notification area
└── <footer> - Page footer (loaded from template)
JavaScript Functions Reference¶
Key functions in hotelmgmt.js that would need updates:
| Function | Purpose | Affected by redesign |
|---|---|---|
showHotelData() |
Populates hotel info tab | Yes - sections |
setupRoomData() |
Builds room dropdown | Yes - cards |
buildCalendarTable() |
Creates rate calendar | Yes - weekly view |
saveRoomCalendar() |
Handles rate save | Yes - wizard steps |
showSearchResultList2() |
Renders search results | Yes - card layout |
editCalendarRange() |
Opens rate editor | Yes - wizard |
End of Document