[TECAMS] UI Prototype challenge

Welcome to the TECAMS UI Prototype Challenge. In this challenge, we are looking for you to create a UI Prototype based on the given design. The prototype should be created using React v16.8 & some other  frameworks listed below.

Let us know any questions you have in the challenge forum.

Overview

TECAMS is a new application which will manage the requesting, fulfilment and maintenance of commissioning appointment requests.

A commissioning appointment is an agreed date and time where a Technician will be remotely available to login to the customer’s managed devices and remotely action the agreed work as per the appointment tasks and work types.

There are two main types of appointments: business hours (real time allocation and reservation of a Technician) and after hours (an appointment request which is raised and then needs to be manually approved and allocated to the one or more Technicians).

Technology stack

• React JS 16.8

• Redux

• NodeJS

• HTML

• SCSS

• JavaScript

Note: aim for latest stable and bug free versions where applicable

General requirements

Layout

• The prototype should support resolutions 1366px x 768px and above.

• Beyond 1366px browser width the content should be centred & background should be fluid.

ReactJS Specific

• Keep components small and function-specific

• Reusability is important, so keep creation of new components to the minimum required

• Consolidate duplicate code – DRY your code

• !! The application should persist details in the global redux store when navigating between screens.

• !! Use JSON format files for data. Create services to get the data from these files.

• Comment only where necessary

• Use capitals for component names: Name components as MainNavigation instead of mainnavigation, or Sidebar instead of sidebar.

• Separate stateful aspects from rendering: Keep your stateful data-loading logic separate from your rendering stateless logic. It’s better to have one stateful component to load data and another stateless component to display that data. This reduces the complexity of the components.

• Use appropriate linter to validate your code.

HTML & CSS Specific

• HTML should be valid HTML5 compliant.

• No inline CSS styles- all styles must be placed in an external stylesheet.

• You may use SCSS in the project.

Performance

Implement loading state animation using provided spinner icon when there's an API request in progress or when data is getting loaded or some processing/calculation in progress that’s time consuming. 

Code Pack Requirements

• Readme files to be included for any related instructions including how to setup the code and run on the local

• The UI server side is planned to host out of a docker image environment. FYI only

Security Requirements

• Application coding should align with the requirements of the OWASP Top 10 (refer: www.owasp.org)

• Sensitive information eg user details, should never be stored unencrypted on the client

•  Any cookies used must be transmitted over TLS and must use the secure and HTTPOnly flags

• Applications must validate all input to meet the following minimum requirements: 

• Checks against business rules and processing limits when processing transactions (e.g. financial amount). 

• Bounds or limit checking to ensure input does not exceed the size of variables in memory or data fields. 

• Format checking that validates that the input meets defined type, specification and standard. 

• Neutralise, sanitise, escape or normalise invalid input characters (e.g. database, operating system etc.); and 

• Input data must be validated only after the data has been decoded.

Platform

The application should support these desktop browsers: Chrome latest, Firefox latest (Mac & Windows), Safari latest (Mac), IE11+ (Windows), MS Edge

 

Application requirements

0. General

For stateless components please add the .component.jsx  suffix refer: /src/shared/components/Footer in the forum attached base submission. You can also delete the existing unused files. This way storyboard track components /.storybook/main.js. No need to focus much on storybook for now, just adding .component.jsx suffix is enough. 

1. Resources & links

• The marvel-app version of the storyboard is provided here.

• Storyboard source files & other reference docs are attached in the challenge forum.

• UI Elements https://marvelapp.com/6j3c91f/screen/66748847(the animation asked by client)

• Base application to start with is attached in the forum.

2. Landing page

This page is temporary & will be replaced with a login page later. Create this page with these links in the main section:

• Login As Appointment Requestor (role id: aAPPOINTPLUS-TECAMS-RQST)

• Login As System Admin (role id: aAPPOINTPLUS-ADMIN)

• Login As Reference Data Manager (role id: aAPPOINTPLUS-TECAMS-REFDM)

• Login As Reporting Access (role id: aAPPOINTPLUS-TECAMS-RPTS)

• Login As Resource Manager (role id: aAPPOINTPLUS-TECAMS-RMGR) (Should be a dead link for now)

• Login As Technician (role id: aAPPOINTPLUS-TECAMS-TECH)  (Should be a dead link for now)

 

Clicking these links should navigate the to dashboard of respective users.    

2.1 Footer

Clicking Terms of use in the footer should show this modal https://marvelapp.com/6j3c91f/screen/66762256

Clicking Contact in the footer should show this modal https://marvelapp.com/6j3c91f/screen/66762257

3. Dashboard: My Appointments

Ref: https://marvelapp.com/6j3c91f/screen/66748810

• This the dashboard of the users with Appointment Requestor, System Admin, Reference Data Manage & Reporting Access roles.

• This page lists all the appointments that are recorded against this user. An API search on page load will retrieve the appointments created by the logged in user.

• My Appointments link at the top and screen should only be present when the user has Appointment Requestor role.

• An Upcoming Appointments sub section will show the first 5 closed upcoming appointments for the user, while All appointments will show these and all other appointments returned against the user.

• Clicking summary metric should toggle the summary metric section.

• By default the toggle button should be checked.

• In unchecked state the dashboard should appear like this: https://marvelapp.com/6j3c91f/screen/66748848

• Clicking Create Appointment should navigate to create appointment screen https://marvelapp.com/6j3c91f/screen/66748812 .This button should only be visible for the users with role “Appointment Requestor” should have this

• The section above the “Upcoming Appointments” is the metric section Ref: https://marvelapp.com/6j3c91f/screen/66748810 .

• There are two types of appointments: Business Hours & After Hours you can notice this in the metric section.

• Implement the bar chart by following the storyboard.

3.1 Dashboard: All Appointments Section

Ref: https://i.imgur.com/Uzfa1IN.png 

• This section lists all appointment of logged user.

• Implement client side sorting for all the fields except Action.

• By defaults appointments should be sorted based on the Appointment start date. Notice in UI the Date/Time has down_arrow icon denoting fields are sorted based on this column.

• Clicking an appointment ID should navigate to the appointment details page.

• Implement the hover state for different sections by referring to this view https://marvelapp.com/6j3c91f/screen/66748811

• Clicking the three dots in the Action column should show a popup with three actions to Update, Reschedule or Cancel an appointment. Ref: https://marvelapp.com/6j3c91f/screen/66748811

• Implement pagination. Clicking a pagination link should make a request to the server & get the new data. This can be mocked.

• Clicking “Show more” should show 20 records per page & the link changes to “Show less”. Clicking “Show less” should revert the table to show 10 records per page.

3.2 Dashboard: Search & Filter 

Ref: https://marvelapp.com/6j3c91f/screen/66748849

Users should be able to search appointments from the search appointment search box. 

Clicking the filter button shows the filter popup. Clicking the “Apply” button should close the filter popup & filter the records based on entered criteria.

4. New Appointment

Ref: https://marvelapp.com/6j3c91f/screen/66748812 

There are two type of appointments: Business hours and after hours

Using the Appointment Type select control a user can select the Appointment Type. 

Only users with the Appointment Requestor role should have the create appointment option enabled.

The after hours flow will share many of the same screens as the business hours however please ensure the build for the after hours and business hours flows are kept fully separate in the build to allow easy future maintenance. Create separate reactJS components for after hours and business hours.

4.1 New Appointment: Business hours

The workflow for the creation of this type of appointment in these pages:

https://marvelapp.com/6j3c91f/screen/66748812 to https://marvelapp.com/6j3c91f/screen/66748834

Make sure to implement the “No slot available” logic https://marvelapp.com/6j3c91f/screen/66748829 and the error logic: https://marvelapp.com/6j3c91f/screen/66748832

You can use your best judgement to implement these states. Document this in readme.

4.1.1 Review Details

• In the Review Details page (https://marvelapp.com/6j3c91f/screen/66748824) clicking the “edit” link in a section should make that section editable https://marvelapp.com/6j3c91f/screen/66748825.

• Save & Cancel buttons appear at the bottom of the edit enabled section. Clicking these should Save & Cancel the changes & make the section read-only again.

• Clicking the expand/collapse arrow button “^” should expand/collapse the section. The arrow direction should also change. 

• During the edit mode the appointment type/sub type and priority values cannot be changed. Any other attributes which are changed during edit here must still pass the similar validations performed as per the original capture screens.

4.1.2 Return home

Clicking Return home (https://marvelapp.com/6j3c91f/screen/66748831) should navigate to the dashboard page. Similarly at any time the TeCAMS logo at the top left can return the user to their landing page (but firstly asking for confirmation only if they are currently part way through raising the appointment).

4.1.3 Validation

Implement empty field validation for the required field marked with (*). A user shouldn’t be able to move to the next screen without entering the required fields. A number of the input fields may also have input pattern rules (eg funding code in the after hours flow) – refer to the documentation for more details.

4.2 New Appointment: After hours

The workflow for the creation of this type of appointment in these pages:

https://marvelapp.com/6j3c91f/screen/66748835 to https://marvelapp.com/6j3c91f/screen/66748841

Unlike in a business hours appointment, where the user selects real time from available slots, in after hours the user gives a required start/end date/times and the appointment then needs to undergo a review and resource allocation/approval by the Resource Managers before it can proceed.

The after hours flow will share many of the same screens as the business hours however please ensure the build for the after hours and business hours flows are kept fully separate in the build to allow easy future maintenance. Create separate reactJS components for after hours and business hours.

Final Submission Guidelines