Ognomy Phase 3 Secretary UI Prototype Part 1

CHALLENGE OBJECTIVES

• Build the UI for the new secretary role to be added to the web app.

 

PROJECT BACKGROUND

• We are building a mobile app that allows patients to schedule and participate in teleconsultations on their mobile device, and a web app that allows doctors / admins / secretaries to view teleconsult schedules and participate in teleconsults from a desktop device.

• In this phase we are planning to add a lot more features to the web app and update the mobile app with some new features.

 

TECHNOLOGY STACK

• ReactJS

• Redux

• HTML5

• Javascript

• REST

• JSON

 

CODE BASE

You need to work with the provided code base which is a functional web app integrated with backend. You are supposed to implement new pages for the secretary role but NOT break any existing functions. This is considered a major requirement in the scorecard during review.

 

Please also note we provided a new frontend code base for this challenge, if you worked on the previous challenge you must download the latest code and make changes to the new code base. Using the old code base for this challenge is NOT acceptable.

 

CODE QUALITY

You must take code quality into consideration, for example: you should create components for reusable UI / features instead of copying and pasting the same code everywhere. This is considered a major requirement in the scorecard during review.

 

API INTEGRATION

For the new admin pages, please make sure you don’t hardcode any data, instead please create local json files and use these as data sources for the new pages. You should create local services to get data from the JSON files and properly implement state management.

 

SCREEN REQUIREMENTS

Login Page

After successfully login, you’ll see the current home screen. Please add a new link to the left of the search icon that will open the new Secretary home page to be implemented in this challenge, this will be the temporary entry to the secretary pages.

 

Home

The secretary role will have its own home page, and we need to make some tweaks to the design as illustrated below:

• The blue box isn’t necessary, let’s remove it, will just keep the ones on the right and show more of these to fill the screen.

• If a patient has a work card and an appointment for ‘Today’ it needs to be front-loaded and marked some way (red).

  • Checkmarks and text on incomplete items should turn red when the appointment is 2 business days away 

• Add ‘Check copay value’ as a to-do item to the list on each patient card

• The checklist items are interactive, the secretary should be able to check / uncheck an item from the list (unchecked is gray and checked is green, but sometimes unchecked might also be red as stated above)

• Populate status of some of the items from json but allow them to be checked / unchecked manually:

  • Personal Information progress

  • Insurance Information

  • Payment Setup

  • Patient Forms

  • Medical questionnaire is not being collected at this time, do not include

• Shouldn’t see upcoming patients if everything is complete

  • When all items are completed, should show the last “Completed all required items” card above for 30 seconds, then clear out. Next upcoming appointment with outstanding items should load.

• The user should have the ability to scroll through upcoming patients so they can see more than 3 as shown in design

• Add ‘cancel appointment’ to card which should cancel the appointment for the physician and patient, please show a confirmation popup for this action

• Add patient phone number to top of card (under appointment time - reference physician screen)

• Add patient email to top of card (under appointment time)
  

• Clicking the patient name will navigate to patient details page (already exists)

• Please show a warning message saying “Your password is expiring in xx days, please update your password now or you won’t be able to login once it expires.”

• You need to implement the New Order section but clicking on an order doesn’t need to do anything in this challenge. That means the right sidebar will have static content in this challenge.

  • Each order shows the patient name at the top and physician name at the bottom

  • The user can click View All to see more orders which should be loaded into the bottom of the view

 

Calendar

The calendar pages need to be implemented in this prototype but the calendar page is also needed by other roles, so make sure you create reusable components for the calendar pages, this is considered a major requirement:

• Consider using a library like this: https://github.com/jquense/react-big-calendar, or you can suggest other libraries, but we need it styled to look like our design.

• You should not have the code in folders specific to the secretary role, since other web app roles (physician, admins, technicians, etc…) will have access to the calendar page as well.

• The calendar only needs to show appointments in this phase, ignore Tasks, Reminder and Others (do not show them on the UI).

• The calendar must work like normal calendars that support daily, weekly and monthly views

• The user can CRUD all physician calendars

  • C = Create, and it means creating an appointment from the web app, the interface will allow the secretary/admin to pick the physician, the patient, and then a time slot. Please note the date and time should only appear after a physician is selected.

  • U = Update, and it means rescheduling the appointment to a different time for a given appointment.

  • D = Delete, and it means canceling an existing appointment.

  • R = Read, nothing special here

• The user can filter appointments by physicians

• The physician / patient input fields need to support auto complete

 

Patients

Patients page is out of scope for this challenge.

 

Tracking

The tracking page is out of the scope of this challenge.

 

GENERAL REQUIREMENTS

• Must use ReactJS and follow the provided design.

• The main content should have fluid width to fill all the available space, the minimum supported resolution is 1280*720 (height is actually unlimited since the page can scroll).

• Searching / filtering should work whenever applicable.

• Pagination should work whenever applicable.

• Filtering/pagination happens on the server side so you need to pass the query parameters and the server is expected to return the pagination info (pageSize, total etc).

• Implement popup for confirmation and warning messages. Do NOT use browser alerts, but use custom styles popups as shown in the design

• Show loading spinners when populating data from API / local JSON to UI

• Implement validation errors (for example: login error as shown in design)

• No linting errors

• No errors with prod builds

• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 

CODE REQUIREMENTS

• ES6 syntax is preferred, as Babel has been set up to handle transpiling the syntax to the current JavaScript standard.

• Use .jsx extension for React components; using PascalCase for filenames. E.g., ComponentName/index.jsx.

• Do not create a single .css/.scss file for the whole app. Each component should have its own stylesheet file.

• Ensure that there are no lint errors.

• You’re free to choose between CSS & SCSS but you need to use flex instead of float.

• Follow a clean folder structure.

• Create reusable components.

 

JAVASCRIPT REQUIREMENTS

• All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

• Use ES6 linter for code quality

 

LICENSES & ATTRIBUTION

• Third-party assets used to build your item must be properly licensed and free for commercial use. MIT and Apache v2 licenses are ok, for any others please check with us to get approval first.

• Sufficient information regarding third-party assets must be present in your documentation. This includes the author, license info and a direct link to the asset online.

 

BROWSER REQUIREMENTS

• Windows: IE 11+, Chrome latest, Firefox latest

• Mac: Safari Latest, Chrome Latest, Firefox Latest

Final Submission Guidelines

• Full code that covers all the requirements.

• A detailed README file including information on how to setup and run your application.