Ognomy Phase 3 Admin UI Prototype

CHALLENGE OBJECTIVES

• Build the UI for the new admin 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 admin role but NOT break any existing functions. This is considered a major requirement in the scorecard during review.

CODE QUALITY

You must take code quality into consideration, for example: you should create component 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

Please add a simple banner (modal that must be dismissed before the users can be allowed to login) as described below:

 

“Notice

Warning: This system is restricted to authorized users for business/medical purposes only. Unauthorized access or use is a violation of company policy and the law. This system may be monitored for administrative and security reasons;

 

By proceeding, you acknowledge that:

• You have read and understand this notice

• You consent to the system monitoring

 

<button to continue to login screen> I acknowledge  </button>”

 

We don’t have a design for this, please just implement a simple popup that matches the styles of the existing web app.

 

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

 

Admin Pages

We have provided the design for the admin pages, please check the forum after you register to the challenge.

• Home (screen 1)

  • 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.”

  • The sidebar on the right is static

  • In the System status tile, we don’t need the “Upcoming System Maintenance” message at the bottom

  • Implement the other UI elements as per design, and make sure navigation to the other pages is correct

• Users - Patients List (screens 2 - 4)

  • This page shows the list of patient users, the recently view section shows users as tiles and the all patients section shows users in tabular view

  • The patient’s phone number must be shown in the tile too (currently missing from design)

  • When hovering on a tile the admin can choose to View Profile, Edit or Delete the user, clicking the name should do the same as View Profile

  • On the right side the admin can add a new user, the Role dropdown will have 4 options: Physician, Technician, Secretary and Admin. Patient users can NOT be added by admins

  • Once a new user is added, admin should be redirected to the user role tab page (for example: if the adds a new Physician, screen 11 should be shown)

  • The admin can search, sort, edit or delete patients from the table view as well. The name column is clickable and will lead the admin to the patient details (same as View Profile)

  • The admin should be able to sort by the following (applies to all tabs):

    • Last name

    • First name

    • Date Added (ascending) 

    • Date Added (descending) 

• Users - Patient Profile (screen 5 - 10, 12)

  • The admin can view patient profile on this screen

  • Please rename “Patient’s Files” (highlighted in screen 6) to “Patient Forms”

  • By default the right sidebar shows notes and progress data, but when Patient’s Files is clicked, it shows the files associated with the patient

    • ‘All File Types’ should be changed to ‘Added by’ drop down to a multi select with user names

      • Should only show the users who have uploaded documents to that patient, including the patient themselves

    • ‘Latest Date’ should be renamed to ‘Newest First’. Other options are:

      • Oldest First

      • Alphabetical (ascending)

      • Alphabetic (descending) 

  • When clicking the 3-dot menu icon on a file, the admin can Download, Print, Send or Delete the file (screen 7)

  • The admin can also select one or multiple files and then Download, Send or Delete the files, but note the Print action is disabled if multiple files are selected (screen 8), clicking the close icon will dismiss the blue panel and de-select the files

  • File deletion must show a confirmation dialog first (screen 9)

  • When files are deleted, please show a toast (screen 10), but we don’t need the “Undo” button, please don’t include that in your implementation.

  • The plus button on the UI will simply allow the admin to upload a file to the patient

  • When other users request some of the files to be deleted from the patient’s profile, the delete icon will show under the file (screen 12)

• Delete Requests (screen 11)

  • The admin will get to this page from the home screen (by clicking the Delete Requests tile)

  • The pending requests tab will show a list of pending requests, each row will show a single file to be deleted. The patient name should be a clickable link which will load the admin to the profile page, the file name is also a link that will allow the admin to preview the file directly on the page. Replace the “Patient’s Files” link on the right side with two buttons: Approve and Reject

    • Approve will ask the admin to confirm the deletion of the file

    • Reject will show a popup asking the admin to enter the reject reason and submit the rejection

  • Delete History will show past requests, the first 4 columns in table will be the same as pending requests, the 5th column will show PROCESSED DATE, and the 6th column will show the status which is either Approved or Rejected

• Users - Physicians (screen 13)

  • This page shows the physician users and it should have similar layout as the Patients view, the design is currently missing a table at the bottom, please make sure you add that

    • Blue profile card

      • Photo, name, title, and phone should become editable on click of edit button (screen 19)

      • ‘Submit’ should save updates, ‘Cancel’ should discard updates and close edit mode

    • About (long text)

      • ‘Edit’ should open edit view

      • No rich formatting needed, but hitting enter twice should indicate a new paragraph tag 

      • ‘Submit’ should save updates, ‘Cancel’ should discard updates and close edit mode

    • Upcoming appointments 

      • Should load first 4 appointments that are the soonest to occur

      • Should have the ability to ‘view more’ by scrolling

  • Please note that one thing different from the Patients view is that there’s an additional message showing when password is going to expire (design shows email expiring / expired and that’s a typo). The table view must also show this message.

  •  

• Users - Technicians / Secretaries / Admins

  • These pages are not shown in the design, but they should have similar page layout and features like Physicians, just that the users will be differents

  • Make sure you use different JSON files (or different objects from the same JSON file) for these different types of users

• Users - Physician Profile (screens 14 - 22)

  • The page should show the details of the physician

  • Clicking the edit icon on the blue tile should make the avatar, name, title and phone number editable (email is not editable, check screen 19). Clicking the avatar icon should allow the admin to upload a new photo (.png / .jpg format)

  • Clicking the edit icon in about section should make the section editable, it should preserve multiple blank lines

  • The bottom should show the upcoming Appointments for this physician

  • View Calendar link will take the admin to the calendar page (not in scope of this challenge)

  • The physician’s availability can be managed on the right sidebar (screens 15 - 18)

    • Add Availability

      • Admin has the right to set physician availability in blocks (e.g. Tuesday mornings, Wednesday afternoons)

      • ‘+’ icon should open screen 14

      • Clicking the 3-dot menu icon should open screen 15

        • ‘Delete’ should remove that time slot from doctor’s availability

        • Please show a warning popup: “Warning! You are about to delete this physician’s time slot and cancel all future appointments in these time slots. Make sure any appointments during this time have been rescheduled. Enter your Admin Password to confirm <input> <button> Confirm </button> / <button> Cancel </confirm>”

        • ‘Edit’: should open screen 17 with applicable information loaded and title should say Edit instead of Add

    • Edit availability: screen 16 and 17

      • User should be able to multi-select days

      • ‘More Range’ should be corrected to ‘Add Time Range’ 

      • ‘Add Time Range’ should add up to 4 ranges

      • Validation error “You cannot add more than 4 time ranges per day”

      • ‘Delete’ icon should have same behavior as ‘delete’ in screen 15 above

      • ‘Submit’ should save the changes, Cancel will discard the changes

  • The admin should be able to directly change the physician’s password (screens 19 and 20)

  • The admin is able to reset the password for the physician which will trigger the system to send an email to the physician’s email address (screens 21 and 22)

 

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

FINAL DELIVERABLES

• Full code that covers all the requirements.

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