Admin Panel Guide
Azure Mirage Villas · Staff Reference Document
📋 Overview
The Admin Panel gives authorised staff full control over bookings, room availability, and blocked dates. It is password-protected and accessible only to staff with login credentials.
The panel is divided into five sections, accessible from the left-hand sidebar:
- Overview — at-a-glance statistics and recent bookings
- Bookings — full list of all bookings with status management
- Calendar — month-by-month visual view of bookings and blocked dates
- Block Dates — mark specific dates as unavailable for new bookings
- Availability — check which rooms are free for any date range
🔐 1. Signing In
Navigate to the admin panel URL in your browser. You will be presented with a login screen.
Enter your username and password
Use the credentials provided by your system administrator.
Click Sign In
If your credentials are correct you will be taken directly to the Overview screen.
To sign out
Click ← Sign out at the bottom of the left sidebar at any time.
📊 2. Overview
The Overview is the first screen you see after signing in. It gives you an instant summary of the property's current status.
Stat Cards
Five cards at the top of the screen show:
| Card | What it shows |
|---|---|
| Total Revenue | Combined total of all confirmed bookings |
| Confirmed | Number of confirmed bookings |
| Pending | Number of bookings awaiting confirmation |
| Cancelled | Number of cancelled bookings |
| Blocked Dates | Total number of individual dates currently blocked |
Recent Bookings Table
Below the stat cards is a table showing the five most recent bookings. Each row shows the Booking ID, guest name, room, dates, total, and status.
Click the View button on any row to open a full details modal for that booking.
📋 3. Bookings
The Bookings section shows every booking in the system, most recent first.
Viewing Booking Details
Click the View button at the end of any row. A modal will open showing the full booking record, including:
- Booking ID
- Guest name, email and phone
- Room, check-in and check-out dates, number of nights and guests
- Total amount and payment type (full or 30% deposit)
- Any special requests made by the guest
Close the modal by clicking × in the top right, clicking outside the modal, or pressing Escape.
Updating a Booking Status
Each row has a dropdown and a Save button in the Action column.
Select the new status
Use the dropdown on the booking row to choose Confirmed, Pending, or Cancelled.
Click Save
The page will reload with the status updated. The badge colour will change to reflect the new status.
📅 4. Calendar
The Calendar gives a visual month-by-month view of all bookings and blocked dates. You can navigate freely to any month, past or future.
Navigating the Calendar
Previous month
Click the ‹ arrow on the left to go back one month. There is no limit — you can navigate as far back as needed.
Next month
Click the › arrow on the right to advance one month. You can navigate as far into the future as needed.
Reading the Calendar
| Colour | Meaning |
|---|---|
| Blue | Date is part of a confirmed or pending booking |
| Red | Date has been manually blocked |
| Grey | Date is available |
| Gold outline | Today's date |
Viewing a Booking from the Calendar
Any blue (booked) date is clickable. Click it to open the full booking details modal for that guest — the same modal as in the Bookings section.
Hover over any day to see a tooltip with the room name and guest name (for booked dates) or the block reason (for blocked dates).
🚫 5. Block Dates
Use this section to mark specific dates as unavailable — for example for maintenance, owner use, or private events. Blocked dates cannot be booked through the guest booking form.
Adding a Blocked Date
Select a date
Use the date picker to choose the date you want to block.
Enter a reason (optional)
Type a short reason such as Maintenance, Owner use, or Private event. This appears in the calendar tooltip.
Click Block Date
The date will be added to the Blocked Dates list below and will appear in red on the Calendar.
Removing a Blocked Date
In the Blocked Dates table, find the date you want to unblock and click the Unblock button. The date will be immediately removed and made available again for new bookings.
🏨 6. Availability Checker
The Availability Checker lets you quickly check which rooms are free for any given date range — useful when taking phone or email enquiries from guests.
Select a check-in date
Use the first date picker to enter the guest's desired check-in date.
Select a check-out date
Use the second date picker to enter the guest's desired check-out date.
Click Check
Results will appear immediately below, showing each room with its availability, price per night, and maximum guest capacity.
🏷 Booking Statuses
| Status | Meaning | Revenue counted? |
|---|---|---|
| Confirmed | Booking is active and payment has been received or arranged | ✔ Yes |
| Pending | Booking has been received but not yet confirmed — awaiting payment or review | ✖ No |
| Cancelled | Booking has been cancelled. The dates are freed up on the calendar | ✖ No |
💡 Tips
- The Booking ID (e.g.
AMV-A1B2C3D4) matches the reference given to the guest on their confirmation screen. Use it to locate a specific booking quickly. - You can click any booked day in the Calendar to pull up that guest's full booking details without going to the Bookings tab.
- The Availability Checker checks against confirmed and pending bookings. Cancelled bookings do not affect availability.
- Always add a reason when blocking dates — it will show as a tooltip in the calendar and helps other staff understand why a date is unavailable.
- To sign out securely, always use the ← Sign out link in the sidebar rather than just closing the browser tab.