Lesson 2 of 10 · 3 min
Opening a Job: Sheet, Dialog, and Full Page
Learn the three ways to open any job's detail surface — the slide-in sheet, the fullscreen dialog, and the dedicated URL page — and when each is appropriate.
Opening a Job: Sheet, Dialog, and Full Page
Video coming soon
Lesson Notes
Clicking any job card or row in the jobs list opens the JobTaskView in sheet mode — a right-side slide-in panel that appears over the list without navigating away. This is the primary interaction pattern: the list stays visible behind the sheet so you can open another job immediately after closing the current one. The sheet is triggered by the onJobClick handler in JobsListPage and managed by the JobManagementContext, which stores the selectedJob and controls the showTaskView flag.
Inside the sheet header, there is a 'Maximize' icon button (Maximize2 icon) that promotes the current job to a fullscreen dialog, giving more vertical space for the chat and media sections. There is also an 'Open in new page' icon (ExternalLink icon) that navigates to /jobs/[id] — the dedicated job detail URL. The full-page route is useful when you need to share a deep link, bookmark a specific job, or work on a single job without the list cluttering the background.
The full-page view at /jobs/[id] (JobDetailPageInner) loads the job fresh from GET /projects/:id via the API. It also renders two additional panels that the sheet and dialog do not show: a CalendarConflictBanner (shown when the backend flags a scheduling conflict on the loaded project) and a ProjectRequirementsPanel (shown for Owners, Admins, and Project Managers). These are only surfaced on the full page because they require the complete Project shape, not the lighter JobRequest view model used in the list.
On the iOS app, the same three interaction depths map to: tapping a job row in DispatchView pushes OrderDetailView full-screen via NavigationStack. There is no sheet or dialog layer on mobile — every job opens as a full page. Deep links from push notifications can route directly to OrderDetailView with an openAction parameter that pre-selects either the Appointment tab, the Deliverables tab, or the chat sheet.
Provider roles (Owner, Admin, Project Manager, Technician, Editor) open jobs through the same JobTaskView sheet. The key difference from the agent experience is that the 'isClient' prop is false for these roles, which unlocks status-change controls, the team assignment panel, and the Team chat channel. Agents have isClient: true, which hides all mutation controls and restricts chat to the Customer channel only.
Key Takeaways
- Three ways to open a job: slide-in sheet (default), fullscreen dialog (Maximize button), and /jobs/[id] page (Open in new page).
- The full-page view loads additional panels — CalendarConflictBanner and ProjectRequirementsPanel — that require the complete Project shape.
- On iOS, jobs always open as a full-page OrderDetailView; deep links can pre-select a tab or open the chat sheet automatically.
- Setting isClient: true (agent) hides mutation controls and limits chat to the Customer channel.
- Use the dedicated URL when you need to share or bookmark a specific job.