UI Preview¶
Visual mockups of the Admin Dashboard interface
Overview¶
This page shows conceptual UI mockups for the VitaraVox Admin Dashboard. These represent the target design for clinic managers and administrators.
Clinic Manager Dashboard¶
The primary view for clinic managers shows real-time call stats and quick actions.
+==================================================================================+
| VITARAVOX [Dr. Smith Clinic] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [*] Dashboard | | CLINIC DASHBOARD | |
| | [ ] Settings | | ================= | |
| | [ ] Call History | | | |
| | [ ] Waitlist | | Voice Agent Status: [====== ACTIVE ======] | |
| | [ ] Analytics | | Phone: +1 (604) 555-1234 | |
| | [ ] OSCAR Config | | Languages: English, Mandarin | |
| | | | | |
| +----------------------+ | +------------+ +------------+ +------------+ | |
| | | TODAY'S | | THIS WEEK | | SUCCESS | | |
| | | CALLS | | CALLS | | RATE | | |
| | | | | | | | | |
| | | 23 | | 142 | | 94% | | |
| | | | | | | | | |
| | +------------+ +------------+ +------------+ | |
| | | |
| | RECENT CALLS | |
| | ------------------------------------------------| |
| | | Time | Patient | Action | Status || |
| | |--------|--------------|-----------|---------| |
| | | 10:32 | John Smith | Booked | Success || |
| | | 10:28 | Jane Doe | Cancelled | Success || |
| | | 10:15 | Bob Wilson | Rescheduled| Success || |
| | | 09:58 | Amy Chen | Booked | Success || |
| | | 09:45 | Wei Zhang | Transfer | Handoff || |
| | ------------------------------------------------| |
| | | |
| | [View All Calls ->] | |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
Clinic Settings¶
Configuration page for business hours, features, and registration status.
+==================================================================================+
| VITARAVOX [Dr. Smith Clinic] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [ ] Dashboard | | CLINIC SETTINGS | |
| | [*] Settings | | =============== | |
| | [ ] Call History | | | |
| | [ ] Waitlist | | CLINIC INFORMATION | |
| | [ ] Analytics | | +----------------------------------------------+| |
| | [ ] OSCAR Config | | | Clinic Name: [Dr. Smith Family Medicine ] || |
| | | | | Phone: [+1 (604) 555-1234 ] || |
| +----------------------+ | | Address: [123 Medical Plaza, Vancouver] || |
| | | Timezone: [America/Vancouver [v]] || |
| | +----------------------------------------------+| |
| | | |
| | BUSINESS HOURS | |
| | +----------------------------------------------+| |
| | | Day | Open | Close | Status || |
| | |-----------|---------|---------|-------------| |
| | | Monday | 09:00 | 17:00 | [x] Open || |
| | | Tuesday | 09:00 | 17:00 | [x] Open || |
| | | Wednesday | 09:00 | 17:00 | [x] Open || |
| | | Thursday | 09:00 | 17:00 | [x] Open || |
| | | Friday | 09:00 | 17:00 | [x] Open || |
| | | Saturday | --:-- | --:-- | [ ] Closed || |
| | | Sunday | --:-- | --:-- | [ ] Closed || |
| | +----------------------------------------------+| |
| | | |
| | VOICE AGENT FEATURES | |
| | +----------------------------------------------+| |
| | | [x] Allow new patient registration || |
| | | [x] Allow appointment booking || |
| | | [x] Allow appointment cancellation || |
| | | [x] Enable transfer to human staff || |
| | | Handoff Phone: [+1 (604) 555-0000 ] || |
| | +----------------------------------------------+| |
| | | |
| | [ Cancel ] [ Save Changes ] | |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
Waitlist Management¶
View and manage patients waiting for registration when clinic is not accepting new patients.
+==================================================================================+
| VITARAVOX [Dr. Smith Clinic] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [ ] Dashboard | | WAITLIST MANAGEMENT | |
| | [ ] Settings | | =================== | |
| | [ ] Call History | | | |
| | [*] Waitlist | | Status: NOT ACCEPTING NEW PATIENTS | |
| | [ ] Analytics | | Total on Waitlist: 12 | |
| | [ ] OSCAR Config | | | |
| +----------------------+ | [ ] Select All [Contact Selected] [Remove] | |
| | | |
| | +----------------------------------------------+| |
| | | [ ] | Name | Phone | Date || |
| | |-----|----------------|--------------|--------| |
| | | [ ] | Sarah Johnson | 604-555-1111 | Jan 10 || |
| | | [ ] | Michael Lee | 604-555-2222 | Jan 10 || |
| | | [ ] | Emily Wang | 604-555-3333 | Jan 09 || |
| | | [ ] | James Wilson | 604-555-4444 | Jan 09 || |
| | | [ ] | Lisa Chen | 604-555-5555 | Jan 08 || |
| | | [ ] | David Kim | 604-555-6666 | Jan 08 || |
| | | [ ] | Anna Brown | 604-555-7777 | Jan 07 || |
| | | [ ] | Robert Taylor | 604-555-8888 | Jan 07 || |
| | +----------------------------------------------+| |
| | | |
| | Page 1 of 2 [ < Prev ] [ Next > ] | |
| | | |
| | ACTIONS | |
| | +----------------------------------------------+| |
| | | When registration reopens, waitlisted || |
| | | patients will be notified automatically. || |
| | | || |
| | | [ Open Registration Now ] || |
| | +----------------------------------------------+| |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
Call Analytics¶
Analytics dashboard showing call patterns, success rates, and language distribution.
+==================================================================================+
| VITARAVOX [Dr. Smith Clinic] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [ ] Dashboard | | CALL ANALYTICS | |
| | [ ] Settings | | ============== | |
| | [ ] Call History | | | |
| | [ ] Waitlist | | Date Range: [Last 7 Days [v]] [Export CSV] | |
| | [*] Analytics | | | |
| | [ ] OSCAR Config | | SUMMARY METRICS | |
| | | | +----------+ +----------+ +----------+ +------+ | |
| +----------------------+ | | Total | | Success | | Avg | | Hand | | |
| | | Calls | | Rate | | Duration | | offs | | |
| | | | | | | | | | | |
| | | 142 | | 94% | | 2:34 | | 8 | | |
| | +----------+ +----------+ +----------+ +------+ | |
| | | |
| | CALLS BY DAY | |
| | +----------------------------------------------+| |
| | | 30 | * || |
| | | | * * * || |
| | | 20 | * * * * * * || |
| | | | * * * * * * * || |
| | | 10 | * * * * * * * || |
| | | | * * * * * * * || |
| | | 0 +----+----+----+----+----+----+--------| |
| | | Mon Tue Wed Thu Fri Sat Sun || |
| | +----------------------------------------------+| |
| | | |
| | LANGUAGE DISTRIBUTION ACTION BREAKDOWN | |
| | +--------------------+ +--------------------+ | |
| | | | | | | |
| | | English: 78% | | Bookings: 62% | | |
| | | [===========] | | [=========] | | |
| | | | | | | |
| | | Mandarin: 22% | | Reschedule: 21% | | |
| | | [===] | | [===] | | |
| | | | | | | |
| | | | | Cancellations: 12%| | |
| | | | | [==] | | |
| | | | | | | |
| | | | | Transfers: 5% | | |
| | | | | [=] | | |
| | +--------------------+ +--------------------+ | |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
OSCAR EMR Connection¶
Configuration page for connecting to the clinic's OSCAR EMR system.
+==================================================================================+
| VITARAVOX [Dr. Smith Clinic] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [ ] Dashboard | | OSCAR EMR CONNECTION | |
| | [ ] Settings | | ==================== | |
| | [ ] Call History | | | |
| | [ ] Waitlist | | CONNECTION STATUS | |
| | [ ] Analytics | | +----------------------------------------------+| |
| | [*] OSCAR Config | | | || |
| | | | | Status: [====== CONNECTED ======] || |
| +----------------------+ | | || |
| | | Last Sync: 2 minutes ago || |
| | | Response Time: 185ms || |
| | | API Version: v1 || |
| | | || |
| | +----------------------------------------------+| |
| | | |
| | OSCAR CONFIGURATION | |
| | +----------------------------------------------+| |
| | | || |
| | | OSCAR URL: || |
| | | [https://oscar.clinicname.ca:8443/oscar ] || |
| | | || |
| | | Consumer Key: || |
| | | [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ] || |
| | | || |
| | | Consumer Secret: || |
| | | [******************************** ] || |
| | | || |
| | | Token Key: || |
| | | [xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx ] || |
| | | || |
| | | Token Secret: || |
| | | [******************************** ] || |
| | | || |
| | +----------------------------------------------+| |
| | | |
| | [ Test Connection ] [ Cancel ] [ Save ] | |
| | | |
| | +----------------------------------------------+| |
| | | Note: Contact Vitara support if you need || |
| | | help obtaining OSCAR OAuth credentials. || |
| | +----------------------------------------------+| |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
Super Admin View¶
System-wide view for VitaraVox administrators to manage all clinics.
+==================================================================================+
| VITARAVOX ADMIN [System Admin] [Logout] |
+==================================================================================+
| |
| +-- NAVIGATION --------+ +-- MAIN CONTENT ---------------------------------+ |
| | | | | |
| | [*] All Clinics | | SYSTEM OVERVIEW | |
| | [ ] System Settings | | =============== | |
| | [ ] Users | | | |
| | [ ] Audit Logs | | +----------+ +----------+ +----------+ +------+ | |
| | [ ] API Keys | | | Active | | Total | | Today's | | Sys | | |
| | | | | Clinics | | Calls | | Calls | | Load | | |
| +----------------------+ | | | | (Week) | | | | | | |
| | | 5 | | 712 | | 156 | | OK | | |
| | +----------+ +----------+ +----------+ +------+ | |
| | | |
| | CLINIC STATUS | |
| | +----------------------------------------------+| |
| | | Clinic | Status | Calls | Rate || |
| | |---------------------|--------|-------|-------| |
| | | Dr. Smith Medicine | Active | 142 | 94% || |
| | | Chen Family Clinic | Active | 118 | 91% || |
| | | Vancouver Medical | Active | 98 | 96% || |
| | | Pacific Health | Active | 203 | 88% || |
| | | Sunrise Clinic | Active | 151 | 92% || |
| | +----------------------------------------------+| |
| | | |
| | [ Add New Clinic ] | |
| | | |
| | SYSTEM HEALTH | |
| | +----------------------------------------------+| |
| | | Service | Status | Uptime || |
| | |---------------------|-------------|---------| |
| | | Vapi.ai Connection | Connected | 99.9% || |
| | | OSCAR REST Bridge | Connected | 99.8% || |
| | | PostgreSQL | Healthy | 100% || |
| | | Voice Agent | Running | 99.9% || |
| | +----------------------------------------------+| |
| | | |
| +--------------------------------------------------+ |
| |
+==================================================================================+
Mobile Responsive View¶
The dashboard adapts for mobile clinic managers.
+==========================+
| VITARAVOX [=] |
+==========================+
| |
| Dr. Smith Clinic |
| |
| Voice Agent: ACTIVE |
| +1 (604) 555-1234 |
| |
| +---------+ +---------+ |
| | TODAY | | SUCCESS | |
| | 23 | | 94% | |
| | calls | | rate | |
| +---------+ +---------+ |
| |
| RECENT CALLS |
| +----------------------+|
| | 10:32 John Smith ||
| | Booked - Success ||
| +----------------------+|
| | 10:28 Jane Doe ||
| | Cancelled - Success ||
| +----------------------+|
| | 10:15 Bob Wilson ||
| | Rescheduled - Success||
| +----------------------+|
| |
| [View All Calls] |
| |
+==========================+
| [Dashboard] [Settings] |
| [Waitlist] [Analytics] |
+==========================+
Design Notes¶
Color Scheme¶
| Element | Color |
|---|---|
| Primary (Header, Buttons) | Indigo (#3949AB) |
| Success | Green (#4CAF50) |
| Warning | Amber (#FFC107) |
| Error | Red (#F44336) |
| Background | White (#FFFFFF) |
| Secondary Background | Gray (#F5F5F5) |
Typography¶
| Element | Font | Size |
|---|---|---|
| Headers | Inter Bold | 24-32px |
| Body | Inter Regular | 14-16px |
| Data/Numbers | Roboto Mono | 14-16px |
Accessibility¶
- WCAG 2.1 AA compliant contrast ratios
- Keyboard navigation support
- Screen reader compatible labels
- Focus indicators on all interactive elements
Implementation Status¶
| Screen | Status |
|---|---|
| Dashboard | Planned |
| Settings | Planned |
| Waitlist | Planned |
| Analytics | Planned |
| OSCAR Config | Planned |
| Super Admin | Planned |
These mockups represent the target UI for v2.0 development.