Appointment Details
Use the Appointment Details screen to review and manage all session information. This screen includes multiple tabs for session metadata, financial details, attached documents, and status history. It supports authenticated users and appears in the embedded panel of the Appointments screen.
This screen includes:
- Appointment metadata: session status, doctor, clinic, and patient details.
- A responsive layout for mobile and desktop viewports.
- Status indicators:
- Green: Scheduled
- Yellow: Pending
- Red: Canceled
- Blue: Visit Completed.
- Tabs: Details, Charges, Documents, and History.
- Contextual actions:
- Start Video, Cancel, and Visit Took Place for scheduled sessions.
- Read-only views for completed or canceled sessions.
- Dynamic content loading, error handling, and embedded chat (when available).
Workflow
-
From the Welcome screen, select Manage appointments.
-
Select a session from the Appointment List.
-
Review summary information: status, doctor, and clinic.
-
Use the tabs to view or manage data:
- Details: Patient and visit information.
- Charges: Fee and discount breakdown.
- Documents: Attached files and GOP previews.
- History: Status transitions.
Validations
- Allows video sessions only when the status is Scheduled.
- Disables edits for Completed or Canceled sessions.
- Displays errors when appointment data is invalid or missing.
- Requires a network connection to load documents and previews.
- Prompts for confirmation when selecting Visit Took Place.
- Hides fields when patient data is incomplete.
- Skips previews for unsupported file types.
Actions
- Starts video calls using Start Video.
- Updates session state when selecting Cancel or Visit Took Place.
- Loads tab content dynamically.
- Opens file previews for uploaded documents and GOPs.
- Displays inline alerts for errors.
- Embeds chat when available.
- Logs and displays status history with timestamps.
SDK and API References
- SDK Reference
- API Reference
GET
/profile/appointments/{id}/details
Returns detailed appointment information, including patient data, session metadata, financial charges, documents, and historical events. Layout adjusts based on platform.
| Variant | Behavior | Example |
|---|---|---|
| Mobile variant | Opens as a full-screen view. |  |
| Desktop variant | Loads in the right-hand embed panel (welcome-or-details) of the Appointments screen. |  |
UI Elements
| Level | Reference | Type | Value | Placement |
|---|---|---|---|---|
| M-3 | — | Green | Appointment status (or Yellow, Red, Blue) | |
| M-3 | — | Title | Patient name | |
| D-1 | — | Splitter | — | |
| D-2 | — | Scroller | — | 70% |
| D-3 | — | Title | Patient name | |
| D-3 | — | Spacer | — | ~ |
| D-3 | — | Green | Appointment status (or Yellow, Red, Blue) | ~ |
| D-3 | — | Spacer | — | ~ |
| 3 | — | Secondary | Appointment action 1 | ~ on desktop |
| 3 | — | Secondary | Appointment action 2 (etc.) | ~ on desktop |
| 3 | — | Tabs | — | ~ |
| 3 | — | Bar | — | ~ |
| 3 | — | Fragment | Details | |
| 3 | — | Section | Details | |
| D-3 | — | Group | Not present on mobile | 33% |
| M-4 | — | Title | [Patient section] | |
| D-4 | — | Regular | Appointment reference, doctor name | ~ |
| D-4 | — | Regular | Appointment reference | |
| D-4 | — | Regular | Doctor name | |
| D-3 | — | Group | Not present on mobile | ~33% |
| 4 | — | Title | [Visit type] | |
| 4 | — | Regular | Visit type | ~ on mobile |
| 3 | — | Line | — | |
| D-3 | — | Group | Not present on mobile | 33% |
| 4 | — | Extra | Date of birth | |
| 4 | — | Regular | DD/MM/YYYY | |
| 4 | — | Extra | Sex | |
| 4 | — | Regular | Sex | |
| 4 | — | Extra | Regular medication use | |
| 4 | — | Regular | Medication use (up to 2 lines) | |
| D-3 | — | Group | Not present on mobile | ~33% |
| 4 | — | Extra | Contact name | |
| 4 | — | Regular | Contact name | |
| 4 | — | Extra | ||
| 4 | — | Regular | ||
| 4 | — | Extra | Phone | |
| 4 | — | Regular | Phone | |
| D-3 | — | Group | Not present on mobile | ~34% |
| 4 | — | Extra | Problem description | |
| 4 | — | Regular | Problem description (up to 5 lines) | |
| 3 | — | Line | (only if documents attached) | |
| 3 | — | Viewer | Document preview | |
| 3 | — | Regular | Document name | ~ |
| 3 | — | Bar | — | |
| 3 | — | Fragment | Charges | |
| 3 | — | Section | Charges | |
| 3 | — | Gray | Item | |
| 4 | — | Extra | Amount | ~ |
| 4 | — | Spacer | — | ~ |
| 4 | — | Extra | Amount | ~ |
| 4 | — | Regular | Appointment fee: | ~ |
| 4 | — | Spacer | — | ~ |
| 4 | — | Highlight | Fee | ~ |
| 4 | — | Dashes | — | ~ |
| 4 | — | Regular | Total: | |
| 4 | — | Spacer | — | ~ |
| 4 | — | Highlight | Amount | ~ |
| 3 | — | Viewer | GOP preview | |
| 3 | — | Regular | GOP name | ~ |
| 3 | — | Line | (only if disclaimers present) | |
| 3 | — | Extra | Notes (only if disclaimers present) | |
| 3 | — | Disclaimer | Disclaimer | |
| 3 | — | Bar | (only if documents attached) | |
| 3 | — | Fragment | Documents | |
| 3 | — | Section | Documents | |
| 3 | — | Extra | Document type | |
| 3 | — | Viewer | Document preview | |
| 3 | — | Regular | Document name | ~ |
| 3 | — | Line | (only if more documents of the same type present) | |
| 3 | — | Bar | — | |
| 3 | — | Fragment | Status history | |
| 3 | — | Section | Status history | |
| 3 | — | Regular | Status transition | |
| 3 | — | Extra | Transition timestamp | |
| D-2 | — | Embed | Appointment's chat | 30% |
Desktop Variant
| Level | Reference | Type | Value | Placement |
|---|---|---|---|---|
| 1 | cs-chat | Toolbar | CS chat | — |
| 1 | scan-to-pay | Toolbar | Scan to pay | — |
| 1 | account | Toolbar | Account | — |
| 1 | settings | Toolbar | Settings | — |
| 1 | splitter | Splitter | — | — |
| 2 | appointment-filter | Embed | Hosts Appointment List (default) or Filter | 30% |
| 2 | welcome-or-details | Embed | Hosts Welcome Screen (default) or Appointment Details | 70% |
PATCH
/profile/appointments/{appointment-id}/details
Update the Details panel when the user selects a different appointment. Display the new appointment information immediately.
PATCH
/profile/appointments/{appointment-id}/update
Update appointment details with the most recent available data. Run automatically at predefined intervals based on the appointment status.
API details planned.