General Information
The Web Schedule is a functional and dynamic scheduling tool that not only allows for efficient scheduling and rescheduling of patients, it also allows for a transparent view for all users of the system to see the past, the present, and the future activity in the office.
The Scheduler will be built using the Vue Scheduler Component by DevExpress (https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Scheduler/Overview/MaterialBlueLight/).
UI Framework Toolkit:
We have elected to use the Metronic8 UI Toolkit for our web application.
https://preview.keenthemes.com/metronic8/demo1/
Font Awesome Icon Kit:
HealthCORE uses the Font Awesome Icon kit. The code snippet to use the custom kit is below:
<script src="https://kit.fontawesome.com/f55e829b7f.js" crossorigin="anonymous"></script>
In order for the kit to be used, a domain must be whitelisted. Please provide a domain name that you'll be using in development so we can add it to the whitelist.
The default view for the scheduler will be daily schedule with all providers visible in column/vertical format. (see DevExpress demo) https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Scheduler/CustomTemplates/MaterialBlueLight/

Schedule Controls
The schedule view is controlled in 2 different ways
1. Sidebar

Date Select
- Calendar shows 6 weeks into the future with blue box highlighting the selected date (default to today) which determines the day or week that is show in the schedule
- Today button allows user to click and quickly get back to selecting today's date
View Select

(when expanded all others are collapsed)
- Provider - show scheduler with columns by provider (default)
- Rooms - show scheduler with columns by room (this would replace Visit Type in the image)
- Remove the option for "All"
Visit Types Select

- this setting only shows the selected visit type appointments on the schedule
- defaulted to "All"
- only visit type options would be visit types that are currently on the schedule
- shows a total count for each visit type
Providers / Room Select

(this one is default expanded)
- shows all active providers, each in their own column (see DevExpress Scheduler demo using Custom Templates. In the example, Cinema Hall 1 and Cinema Hall 2 would be different providers) https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Scheduler/CustomTemplates/MaterialBlueLight/
- shows all additional "room" created in room setup
- shows a total visit count for each provider

See DevExpress Scheduler Demo use of Context Menu:
https://js.devexpress.com/Vue/Demos/WidgetsGallery/Demo/Scheduler/ContextMenuIntegration/MaterialBlueLight/
Settings
Opens the scheduler settings in a new internal tab.
2. Scheduler Settings
- Select whether setting up the "Clinic" or one of the providers
- Chose between Office Hours and a Visit Type. This determines what the grid is representing
- Availability Grid - determined by selections 1 and 2 - if click on a row header (time) it selects/deselects all Monday through Friday boxes for that time - if click on a column header (day) it selects all boxes for every time during the viewable times
- Exceptions - Specific dates and times that either the clinic won't be open or a provider won't be available so it will block off the scheduler and if clinic, indicate that to Soci for public web schedule
- Demo from Screenshot can be seen using the following links (using Metronic UI Toolkit): https://www.healthcoretech.com/Prototypes/Metronic/demo1/dist/utilities/search/scheduler-setup-Office-Hours.html | https://www.healthcoretech.com/Prototypes/Metronic/demo1/dist/utilities/search/scheduler-setup-Visit-Code.html
Clinic Settings

- Schedule Type - always defaults to Clinic unless the path to scheduler setting was from context menu from provider heading
- Office Hours - selecting office hours then uses the grid (3) to choose the office hours for the clinic. If "Visit Type" is selected it will show the possibly visit types (shown in #5) and the grid would be setting the default clinic hours for scheduling each of those visit types depending on which one is selected.
- View - determines the hours that the grid shows as well as the hours that the schedule shows - (example: clinic may want office hours starting at 8am but they set view to 7am to given the availability to schedule earlier when needed)
- Increment - determines the time increment of each slot on grid and calendar

5. Visit Codes - Serves as the master visit code list and then providers would be setup with some or all from that list. The grid settings would be the default hours for each of those visit codes, so when a code is added to a providers setup it would be pull the default times but all editing at the provider level. (Example: Clinic, NP-New Patient: Set to everyday from 10-11 and 3-4. When adding each NP-New Patient to a provider it would automatically be set to the clinic default settings but a specific provider could change theirs to be different if they choose.)

6. Show all Visit Codes - there will be the ability to "hide" visit codes that aren't being used. This icon will allow the entire list to be viewed INCLUDING those that are hidden.
7. Add Visit Code - adds a new visit code and opens the visit code detail screen. Please open in a modal via Metronic8 UI Toolkit.
8. Delete the settings icon as the settings will be controlled on the individual visit types under (Edit)

9. The 3 dots is a context menu that includes the following 3 options

10. Edit opens the Edit Visit Code modal shown below
11. If visit is "Hidden" this will read "Show" to unhide it. If visit is current showing, this will read "Hide" ... essentially toggles the visit code to show or hide.
12. Delete would open a confirmation box with "Are you sure you would like to Delete this Visit Code?"
Edit Visit Code (or New Visit Code)

- This code will be what is used to identify the visit type through out the system: on the scheduler, in reports, in documentation, etc. This must be unique and be validated to insure no duplicates
- Color that will be shown for this visit type on scheduler
- Minutes - time allotted for each visit type
- Description - the actual title of the visit code
- Visit - Type - dropdown with options from API
- Scheduled Resource - add a column to the scheduler to the right of providers for this visit type to be scheduled independent of provider. Unselected by default
- Max - this should have a checkbox to indicate that they are opting to set a "max" and then a number selector from 0-5. Unselected by default
- Provider Required - when selected would cause an appointment for this visit type to show up under BOTH the provider AND the resource column. Provider required would be selected by default
Provider Settings

Differences in Provider Settings Compared to Clinic
- When selecting Office Hours the grid would determine the office hours for that specific Provider. (Visit Codes will not be visible when Office Hours is selected)
- When selecting a Visit Code, Providers set up the time slots available for each visit type which could be the same as the Office Hours if they allow a visit type at any appointment slot, or it could be certain times. For instance, they may only schedule New Patients at 10 and 3:00 each day.
- When selecting Add Visit type icon it would popup a list of visit types from the Clinic Settings / master list of visit types to include for that provider. All visit types are initially setup at the Clinic Setting and then become available for Providers to choose to use or not.
- Edit Visit Type (shown below) - everything will be disabled except for Provider Max (#1) setting which will only appear when editing for Provider. The rest of the settings that are disabled can only be changed at the Clinic level

Scheduler Controls

1. Next to the date (daily) or date range (weekly) there should be an advance button on each side to move forward or backward a day (daily), or a week (weekly)
2. Clicking on the provider name would show a context menu that currently would only have two options:
Week View - remove all other providers and show that one provider with a week at a time visible for easy scheduling of multiple appointments
Settings - links directly to scheduler settings with that provider selected.

1. Double clicking either a time slot or an appointment brings up the edit/create appointment modal below

If it's a new appointment it has a patient search box shown below

Appointment Context Menu (right click)

A majority of this menu would just be links to other parts of the software and not require any development right now for the scheduler itself.
Reschedule - "cuts" the appointment and allows you to drop it back into another time slot on a different day (typically if it was same day they would just drag and drop
Cancel Appointment - draws a line through appointment and asks the reason for documentation
