Properties Page
Once a landlord clicks on a property from the Properties List, they are redirected to the Property Details Page:
/host/properties/:propertyId
This page has two main tabs: Overview and Manage.
Overview
The Overview Tab is the default landing view for each property. It provides a snapshot of the property’s performance, active reservations, earnings, and purchased services — helping landlords manage their listings without diving into configuration settings.
![[Overview.png]]
Hero Section & Active Booking Overlay
At the top of the page, a large hero image of the property is displayed. If the property has an active reservation this week, a booking overlay card appears over the image, showing:
Guest name and number of guests
Check-in and check-out dates
A “View Booking” button that links to the reservation details page
This overlay is calculated by checking all weekly reservations against today’s date.
Weekly Calendar
Below the hero image is the Weekly Calendar, a visual grid that displays the current week (Sunday to Saturday). It shows:
Day blocks with dates and day names
Active reservations positioned across the week using percentage-based widths (so overlapping stays are accurately displayed)
Data source:
Uses the
useReservationshook to fetch CONFIRMED reservations for the selected listing, for the current week.Positioning is dynamically calculated based on check-in and check-out dates relative to the week.
Services Section
The Services Section lists all active subscription services and one-time purchases associated with the property. Landlords can:
See which services are active, their pricing, and their status (e.g., Active, Canceled, Pending Payment).
Add new services by clicking “[[Add Services Modal]]”, which opens a
ServicePurchaseModal.
Each service is displayed in a Service Card, which includes:
Service icon and name
Type (subscription or one-time)
Current status and pricing
Quick actions (e.g., “Buy again” for on-demand services)
Displayed data:
listing.subscriptionServices– recurring services tied to the propertylisting.purchases– one-time or pending service purchases
Earnings Section
The Earnings Section gives landlords a clear view of how their property is performing financially over different time periods.
Time Periods & Date Filtering
When fetching earnings, the backend filters reservations by period:
week
Last 7 days from today
month
From the first day of the current month up to today
alltime
From the beginning of time (new Date(0)) up to today (no date restriction)
Only confirmed reservations with a check-in date within the date range are included.
Channel Breakdown
Reservations are grouped by channel, using the reservation.otaName field. If no otaName is present, the channel defaults to "Direct".
For each channel:
Bookings
Number of reservations with this channel name
Revenue
Sum of reservation.amount for this channel
Occupancy
Sum of booked nights for this channel
Additional behavior:
All available channels from
Channeltable are fetched.If a channel exists but has no bookings in this period, it is added with:
bookings: 0, revenue: 0, occupancy: 0Channels are sorted by revenue (descending) before returning.
Summary table:
Total Revenue
reservation.amount
Confirmed, check-in ≥ startDate
Total Bookings
reservation.id
Count of filtered reservations
Total Occupancy
checkIn, checkOut
Sum of nights across filtered reservations
Avg Revenue / Booking
Revenue ÷ Bookings
Only if bookings > 0
Avg Revenue / Night
Revenue ÷ Occupancy
Only if occupancy > 0
Channel Breakdown
otaName, amount, dates`
Group by channel, fill missing channels with zero
Bookings Section
The Bookings Section displays a scrollable list of up to 3 upcoming confirmed reservations within the next 30 days.
Each booking card includes:
Guest initials and name
Check-in and check-out dates
Clickable link to the reservation details page
A “View All” button takes the landlord to the full Calendar page.
Manage
The Manage tab is where landlords configure everything about a single property: content, pricing, calendars, distribution channels, and operational rules. It’s organized into four areas to keep work focused and efficient:
Property Details
Services
Rates
Availability
Refreshing the page always brings the landlord back to the same property and active sub-tab. Unsaved changes aren’t kept locally; saved changes are immediately reflected after refresh because each save writes to the property and refetches it.
Property Details
A guided, sectioned editor for the property’s core information. Each section saves independently and refreshes the view.
Sections:
Photos
Title
Location
Description
Amenities
Property Type
Listing Type
Property Details (guests, bedrooms, beds, bathrooms)
Pricing
House Rules
Common behaviors:
Save button per section; saving immediately updates the backend and refreshes the current property data.
Inline validation prevents incomplete or invalid submissions (e.g., empty title, invalid number ranges).
Mobile-friendly layout; the left navigation becomes a horizontal strip that scrolls.
![[Services-1.png]]
Photos
Initial state: Existing rooms and their images are loaded; if none, photos grid is empty.
Actions:
Add Room opens a “Select Room Type” dialog (Bedroom auto-numbers).
Add Photos uploads images to the chosen room. Upload progress is shown per image.
Delete Photo removes it from the room and persists the change.
Delete Room removes the room and all assigned images (confirmation required).
Logic:
Rooms appear in a left-hand list; selecting a room shows its photos grid.
Upload works per room and preserves order as you add images.
Title
Initial state: Current listing title is shown.
Actions: Edit the title inline; Save updates immediately.
Validation: Title is required.
Location
Initial state: Address fields and map center from current saved location (defaults to London if empty).
Actions:
Type to search via Google-powered autocomplete.
Picking a place fills address fields (street, city, ZIP, country code) and updates coordinates.
Save persists the structured address and map position.
Validation: Address and coordinates required.
Description
Initial state: Current description, with a live character counter.
Actions: Edit; Save persists.
Validation: 10–500 characters.
Amenities
Initial state: Grid of popular amenities with selection highlights; current ones are pre-selected.
Actions: Toggle amenities; Save persists.
Validation: At least 1 amenity required.
Property Type
Initial state: One of House, Apartment, Studio, Hotel, Villa, Apartment Block pre-selected.
Actions: Select a card; Save persists.
Listing Type
Initial state: One of Entire place, Co Living / Private Room, Co Living / Multiple Rooms pre-selected.
Actions: Select a card; Save persists.
Impact: Shapes downstream inventory and calendar logic.
Property Details (Guests, Bedrooms, Beds, Bathrooms)
Initial state: Counters display current capacity and room counts.
Actions: Increment/decrement; Save persists.
Validation: All counters must be ≥ 1.
Pricing
Initial state: A slider shows base price; current currency is displayed (GBP).
Actions: Drag slider to set base price; Save persists.
Validation: Base price required, within min/max range.
House Rules
Initial state: Check-in/out times prefilled; WiFi, instructions, and access details if previously set.
Actions: Edit WiFi info, check-in/out instructions, and access arrangements; Save persists.
Validation: Check-in and check-out times required.
Services
A property-specific services dashboard showing what’s active today, upcoming, and what can be added.
Today vs Upcoming toggle shows work scheduled for the property (cleanings, maintenance, etc.).
If the property already has services:
Cards show service name, price, and status (Active or Pending Payment).
“Buy Again” for one-off purchases; “Edit” for subscriptions.
If there are no services:
A curated “Available Services” grid is shown from the marketplace.
“Add Services” navigates to the Services hub for discovery and purchase.
![[Services.png]]
Rates
Set pricing per day and per rate plan, with per-channel visibility.
Initial state:
Unit selector preselects the first room/unit (disabled if only one).
Week navigation defaults to current week; mobile shows 3 days, desktop shows 7 days.
If no rate plans exist for the unit, a helpful empty state suggests adding one.
Actions:
Add Pricing Plan opens a dialog to create a new plan (name + default rate).
This creates a new Rate plan on Channex with the inputted default rate.
Click and drag across dates (or double-click a single day) to open a settings dialog for that range.
Per-day cells show price and min-stay indicators.
Channel visibility:
Each rate plan row shows “Connected to” channels (e.g., Airbnb, Booking.com) via logos, or a count if multiple.
Validation:
Past dates are read-only.
You can only select dates for the same rate plan at once.
Saving updates the selected range and refreshes the calendar.
![[Rates.png]]
Availability
Manage daily availability (inventory) across the next days.
Initial state:
Unit selector preselects the first room/unit.
Week navigation defaults to current week; mobile shows 3 days, desktop shows 7 days.
Indicators:
Available: green styling and “Available” label.
Unavailable: red styling and “Unavailable” label.
Limited availability: badge with remaining count.
Actions:
Click and drag across dates (or double-click a day) to open the availability dialog for that range.
Past dates are read-only.
Saving updates availability in both Channex and Hububb System and refreshes the calendar.
![[Availability.png]]
Airbnb Disclaimer & Sync
At the top of Manage tab (when the property is connected to Airbnb), landlords see a disclaimer and Sync button:
Message clarifies current behavior: changes are not pushed to Airbnb; only pulling Airbnb changes is supported.
Sync triggers a background job to refresh all Airbnb-linked properties.
A confirmation dialog appears before sync begins; success/failure toasts inform the user.
![[headerRow.png]]
Read more about [[Airbnb Sync]]
UX Notes, Validation, and State
Refresh behavior: The app reloads the active property and tab; any saved changes persist, unsaved changes do not.
Save behavior: Each section saves independently. After a successful save, the page refetches property data automatically.
Errors:
Inline field messages (e.g., “Description must be at least 10 characters”).
Toaster notifications for server failures.
Mobile responsiveness:
Left navigation becomes horizontally scrollable.
Calendars show fewer days to keep interactions comfortable on small screens.
QA Checklist (Manage Tab)
Property Details
Photos: Add room, upload/delete images, delete room; confirm changes persist after refresh.
Title/Description: Validate required and length constraints; confirm persisted after refresh.
Location: Select via autocomplete; map recenters; save and refresh shows updated address and coordinates.
Amenities: Select/deselect; enforce min=1; save and refresh persists.
Property Type / Listing Type: Change and save; confirm downstream elements behave consistently.
Property Details counters: Validate min=1; save and refresh persists.
Pricing slider: Adjust and save; refresh persists.
Rules: Edit WiFi and instructions; save and refresh persists.
Services
If services exist, statuses and pricing render correctly.
“Add Services” navigates to the Services hub.
Toggle Today/Upcoming works; empty states render correctly.
Rates
Unit selector works; days shown match device (3/7).
Add Pricing Plan creates a plan and refreshes the view.
Range select and per-day edits open dialog; past dates cannot be edited.
Channel icons appear for rate plans mapped to channels.
Availability
Unit selector works; range selection opens dialog; past dates read-only.
Availability badges render correctly based on counts.
Airbnb Sync
Sync button opens confirm dialog; success and error toasts display; page remains usable during background sync.