shadcn.io is not affiliated with official shadcn/ui
Property Viewings Calendar Block for Vue
A Saturday sheet of five viewings with the travel minutes from the previous one, the spare time derived from them, an agent filter at a held height and an Interested, Maybe or Pass choice that tallies.
Installation
Overview
Plan an estate agency's viewing day around the travel between them, with this property viewings calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner lists Saturday 10 October as five viewings, each with its time, address, the agent and the minutes of travel from the previous viewing. The spare time is worked out from them and said in words: "Spare 35 min", "Tight: 8 min spare" or "Late by 10 min", the last two with a warning icon in a Badge. An agent Native Select narrows the sheet to one person's viewings; the list keeps the height of the whole day, and an agent with nothing on shows an Empty state. After each viewing an Interested, Maybe or Pass choice records how it went, and the band above the sheet tallies them ("1 interested · 1 maybe · 0 pass"). Nothing is a map. The bands are ruled by Guides. It's built from Native Select, Badge, Empty and Guides plus native radios, with a CSS entrance only. For estate agencies, lettings teams and any field team with a day of appointments.
FAQ
How do I fill it with my viewings?
Edit VIEWINGS: each has an address, a place (the kind of home), an agent id from AGENTS, a start time, a length in minutes and travel, the minutes from the previous viewing (from the office for the first). The end time, the spare time and the tally are all worked out from them. FEEDBACK_AT_LOAD holds what is recorded already, as "viewing|choice".
How is the spare time worked out?
It is the next viewing's start minus the previous viewing's end minus the travel between them. A negative result is "Late by" that many minutes, under 10 minutes is "Tight", and anything else is spare. The first viewing has nothing before it, so it says "First of the day".
Does the agent filter move the page?
No. The filtered list sits over an invisible copy of the whole day, so the block keeps its height whoever you choose. The spare time of a viewing still counts the previous viewing of the whole day, even one by another agent, because that is where the agent drives from only if it is theirs; adjust travel when you assign agents to separate days.
Where does the feedback go?
Into the page: choosing Interested, Maybe or Pass changes the row, the tally and the polite status line. Nothing is sent or saved, and it resets on reload. To make it real, post each choice to your CRM from the handler and load the recorded choices into FEEDBACK_AT_LOAD.