Lesson 2 of 8 · 4 min

The Agent Dashboard: Your Booking Command Centre

Tour the animated hero, address search, quick actions, and today's orders that make up the agent-facing home screen.

The Agent Dashboard: Your Booking Command Centre

Video coming soon

2/8

Lesson Notes

01

When you land on the Agent Dashboard, the largest element on the page is a centred animated title that alternates every five seconds between a personalised greeting ('Good morning, Alex!') and the prompt 'Where's the property?'. This animation is deliberate — it keeps the booking action front of mind on every visit without crowding the page with buttons. The address search bar sits directly below the title, filling the vertical centre of the viewport so it is immediately reachable.

02

The address search bar accepts a street address, city, or postal code and uses Mapbox autocomplete to resolve the location. As you click into the bar, a row of quick-action chips expands below it: 'Use my location' (which reverse-geocodes your GPS coordinates and pre-fills the address), 'Latest order' (a shortcut to jump into your most recent non-delivered order), 'All orders', 'Calendar', and a 'Voice' chip that is currently marked as coming soon. Selecting any address from the autocomplete immediately opens the booking flow at /booking with the address, latitude, longitude, and address components pre-filled as query parameters — you skip having to type the address again on the booking form.

03

Below the viewport fold, the dashboard surfaces Today's Orders — a chronologically sorted list of every job scheduled for the current calendar day. Each row shows a date-tile (month abbreviation + day number in a coloured box), the property address, the scheduled time, and a status badge. Status badges you will see here are: Pending (amber, waiting for technician assignment), Assigned (blue), Shooting (purple, shoot is currently in progress), Editing (indigo), and Delivered (green). Tapping any row opens the job task view as a slide-over sheet where you can see deliverables, send messages, and track status.

04

On the iOS app (AgentDashboardView), the experience is structured similarly but optimised for mobile: the greeting heading is a bold 30pt heavy font, the search bar is a 52pt tall capsule with a magnifying-glass icon, and the three quick-action pills (All orders, Calendar, New order) sit below the bar in a horizontal row. If you have already granted location permission, the app resolves your GPS coordinates silently on load and pre-fills the search bar placeholder with your current street address — so tapping 'New order' drops the booking map marker on your spot immediately. If permission has not been granted, the placeholder stays generic and the prompt appears later in the booking flow where it belongs.

05

If the active company workspace has loyalty enabled, a rewards card appears between the hero and Today's Orders. It shows your current tier name and badge, your available credit balance in large type, your cashback rate percentage, and (when you are close to the next tier) a spend progress bar. Tapping the card navigates to the full Rewards view. On the web this is the LoyaltyDashboardWidget component; on iOS it is the rewardsCard inside AgentDashboardView. Both show or hide based on whether the org has the loyalty feature enabled — the card is entirely absent if your workspace has not turned on loyalty.

Key Takeaways

  • The address search bar is the primary booking entry point — typing and selecting an address jumps straight to the booking flow with location pre-filled.
  • Use 'Use my location' to reverse-geocode your GPS position and book a shoot at your current location in one tap.
  • Today's Orders below the fold shows all shoots scheduled for today, colour-coded by status.
  • The loyalty rewards card is only visible when the active workspace has loyalty enabled.
  • On iOS, granting location permission once means future visits pre-fill the search bar with your current address automatically.
Related documentation at docs.vremly.com