Revamped Diary Page
A lot of work has gone into completely rewriting our existing diary page from the ground up. As detailed below, the user can expect a completely new look and feel to the existing diary page, while keeping the same features as before and adding a few new ones.
Improved performance
The new revamped diary features dynamic loading, where all components are being loaded in the background and are usable as they appear. This means that the user does not need to wait for the whole page to load before starting to use it, furthermore additional navigation (e.g. mini calendar) after the initial load is also
faster than before.
Left-hand Panel
The updated left-hand panel with have the following features available.
Option to collapse
There will be a button that will allow the user to collapse the whole left-hand panel. By doing so the user will have a larger view available. This is especially useful in the Week view where there are multiple overlapping items.
While in the collapsed view the user will still be able to create a new job using the + button.
Buttons
The following buttons will remain on the left-panel from the previous diary:
- New Job
This allows the user to start a new job directly from the diary page and assign it straight way to a specific day, time and bay. Once created it will show straight away on the current view selected. - MOT Diary
This allows the user to navigate away from the diary page and view the MOT Diary. Within the MOT Diary the user can again click on the diary button and navigate back. Additionally, if the user had changed dates in either view, the current selected date will be retained when moving between the two diaries.
Mini-Calendar
The mini-calendar is still available from the previous diary, within the mini-calendar it will highlight the % hours booked for each day against the amount of time available per day as set in the diary settings page.
Available documents
The available documents section is another section that should be familiar to prior users as it will show all jobs that have been marked as ready to be assigned. Additionally, this section will show all jobs created yesterday or today, along with those marked to be assigned. The jobs that were manually marked for assignment will be shown at the top of the list. Jobs can then be dragged and dropped to the desired location on the diary.
The available documents container will show the top 5 jobs. Any additional jobs will be shown with a + More sign at the bottom of the container. When clicked it will expand the container to show all jobs.
It can then also be restored to the original 5 job view by clicking show less.
The whole available documents section can also be minimised and maximised if required.
Main Diary section – Top Navigation area
Previous / Next selectors
Depending on the current view selected, these arrow buttons will navigate to the previous or next day / week / month.
Daily Note (Day view only)
On the day view, the user will be able to add a new daily note, by clicking on the small Note icon.
This note has a maximum length of 255 characters (Same as the current daily note). As the user is typing the note the character counter will increase so that the user will know how many characters they have left to use. When the user is done they can click save button.
The note editor will remain visible for the user until they click the note button again, or change to a different day or view. Should the note be minimised, the user will know there is a note by seeing the note icon highlighted. These daily notes will be viewable on the weekly and monthly views.
Print (Day view only)
On the day view, the user will be able to click on the print button. The button will then display a dropdown where the user can decide if they want to print today’s schedule or today’s jobs (More detailed view), same as they currently do.
Advance Jobs (Day view only)
On the day view, the user will be able to click on Advance Jobs button.
This button will only be clickable should there be any jobs in an Untimed section for any Bay. Once clicked it will move all jobs on that day in the untimed section for all bays, to the next day in their same bays as they currently are.
Available hours
The available hours section in the top right of the diary will showcase the number of hours that have been used for the specific day being viewed as well as the remaining hours that are left for the day before max capacity has been reached. It will utilise the same colour coding as the mini calendar for quick reference.
The daily limit of hours is set from the diary
settings menu, same as before.
(Database -> User Options -> Diary)
The number of hours used on each day is calculated by using the actual used up space on the diary. For instance, an event could be booked into a bay for 2 hours when it only has planned hours (As set on the document) of 1 hour. In that case, 2 hours will be used for the day.
Untimed events will use the planned hours as they have not been placed on the diary as yet meaning only the
planned hours are available to be used.
A new concept that was not previously accounted for was all day events. For the purpose of used hours, an all-day event will use the time difference of the start and end time settings for the diary. Should no start and end time be set, then 8 hours will apply to each all-day event.
Today button
The today button, is a new button added that simply put, will adjust the selected day to today’s date. It will not change the view that the user is currently in, it will only adjust it to show today in that current view.
Day button
The day button, is a new button added that will adjust the calendar shown, to show the selected day only. In this view, the user will be able to the individual bays.
The day view provides the user with the greatest level of flexibility in terms of managing their jobs at a micro level for a specific day. Day view will also be the default view when navigating to the diary page.
Week button
The week button, is a new button added that will adjust the calendar shown, to show the whole week (Sunday – Saturday) for the selected day.
In this view the user gets the ability to better plan the week ahead, but will not be able to see at a glance which bays are being used on each day. For that level, the user would need to use the day view.
Month button
The month button, is a new button added that will adjust the calendar shown, to show the whole month for the selected day.
In this view the user gets the ability to view the garage’s bookings at a macro level and plan accordingly for the month ahead..
Main Diary section – Details area
Bay Navigation buttons < > (Day view only)
Similar to the current dairy, the user will be able to scroll through the various bays on a selected day.
The number of bays shown on the screen at one time can be adjusted through the settings menu.
All day section
The all day section is reserved for any events that require a full day booking in a certain bay.
In the all day section, the diary will show up to 2 entries at a time, with any more being showcased with a “+ more” clickable link in the corner. Should the user click the “+more” link it will show a flyout showing the full list with a “show less” link to collapse the list again or simply click to the side of the list.
Clicking on any of the events will show more detail via an additional flyout.
Untimed section
The untimed section is reserved for events that the garage knows they need to work on, but aren’t quite sure what time they will get to them. This will allow the garage to keep track of vehicles that they know still need to be worked on in a specific bay.
Similar to the all day section, 2 entries will be shown initially, with any more being shown via a “+ more” link in the corner.
Creating a new job
A new entry into the diary can be created by either clicking on the New Job button in the side panel, or by double clicking on an empty space in the calendar.
The difference between those two options would be that the New job button will not have a specific time allocated, where as double click a specific slot will already have the time and bay pre-selected (in Day view).
Main Diary section – Create / edit popup
When creating a new job as above, or simply wanting to edit an existing job entry the user will be shown the create / edit popup. In this popup the user will be able to add the customer/vehicle details, set the job starting date/time/bay, make it a multi-event entry, set the required planned hours, work type, technician’s status and finally a work description for the event.
Customer / Vehicle section
When creating a new Customer or vehicle, the user will be shown a new quick add screen that will allow the user to capture the most critical fields required to add a new customer or vehicle.
If the user needs to add both a customer and vehicle, they can simply click the add vehicle link on the customer quick add modal to do it all in one convenient location.
If the user is looking to search for an existing customer or vehicle they would select the search button and will shown and new quick search interface that will allow them to search by either customer name, phone number, address or vehicle.
Results will be displayed in a list view where the user can simple select the required customer. Should the required customer not be shown, they have the option to create a new customer or vehicle from the search results screen.
Once a customer has been selected, the customer quick edit screen will be shown. This will allow the user to adjust any required information if needed as well as allow the user to select the required vehicle for this customer should they have more than 1 associated.
Once the user has confirmed the information and chosen the desired vehicle, they would click add to document. Should they want to change their mind and want to edit the selected, they can simply click on the pencil icon and the Customer quick edit modal will re-appear.
Date section
The next part of the create/edit modal is the date section. In here the user will be able to select the required date along with the start and end times as well as the bay required.
If the user had double clicked a specific slot, these values would be pre-populated.
Creating a multi-event entry
A new feature that the revamped diary will provide, is the ability to split a diary entry into multiple entries. These entries can span across multiple bays throughout one day, or even span across multiple days.
To start a multi-event entry, the user can click on the + sign next to the bay drop down.
This will add a second row underneath the 1st row where the user can then again select the date, start time, end time and bay required. The list of date/times will continue to grow until 6 events are shown. Once a 7th event is added a scroll bar will become visible that will show the rest of the events as they are added. At anytime the user can remove any of the event by clicking the red X next the entry.
Details section
In the details section the user will be able to complete the rest of the required details of the job being done. This would include the planned hours, Work type, status, technician and job description.
In this initial release of the revamped diary only a single technician can be associated with a job.
Reassign button
When opening a existing job that is already been placed on the diary, a button will be shown in the bottom left of the modal called Reassign. When click this will remove the job from the diary and place it back in the documents awaiting assignment section.
