Mercury Access Admin Desktop UI Prototype Challenge

Challenge Summary

Welcome to “Mercury Access Admin Desktop UI Prototype Challenge”! The goal of this challenge is to create the UI prototype from the provided design using Angular.

Project Overview

Please check the project background here

Technology Stack

Angular 9, TypeScript, SCSS, HTML 5

BROWSER REQUIREMENTS

Windows: IE 11+, Edge, Chrome latest

Mac: Safari Latest, Edge, Chrome Latest

Assets

The following items are shared on the forum

• Design source file developed on Adobe  Xd

• Marvel App

• Adobe XD Handoff

Individual requirements

The full design is NOT in scope, some of them will be implemented in the future. Please implement the following:

• Login pages 

• Register Pages

• Password Recovery pages

• Header: 

  • Remove “View All Locations”, ”global search”, “notifications
  • Help/support will be deadlink for now
  • If Location is changed from the dropdown then different data will be loaded. Meaning every data in the app will be location-driven.

• Home Page: This will empty for now.

• Edit profile pages

• Administrators pages

• Keyholder Pages

• Device Pages

• Space Pages

• Access history Pages

• Config Pages

• Permission Management

  • This behavior needs to be implemented. An administrator can be managed by permission

• If users don’t have read permissions then don’t show modules related. E.g. if Mike doesn't have read access on “Administrators” then he shouldn’t be able to access the Administrators pages at all.

• If users don’t have edit permissions then don’t allow editing on that module. E.g. If Mike doesn't have edit access on administrators then he shouldn’t be able to add/edit/delete any items, hide the such controls and prevent the page from loading.

• Please use a role guard to prevent the page loading.

• Provide different users with different permissions to verify

 

Below are the out of scopes throughout the application

• All elements on the dashboard (Summary, pie charts, Access History, Last 24h Access)

• All map functionality (All Locations, Sites, Spaces, Access History, etc.)

• Global Search

• Avatar Images (Profile, Administrators, and Keyholders), use first letters of the first name and last, e.g. if Ben Whittaker then show “BW” in the user image circle

• Last 24H Access (right nav)

• All bar charts

• View All Locations

• App Tour

• Tile Views

• Help

 

GENERAL REQUIREMENTS

• This application will be a responsive app, currently, mobile design is under development but please use the responsive design so that we can easily support the mobile view later without much work.

• User angular modules to separate each module aka Administrator, Devices, Spaces, Access History, Configuration

• Do not use browser alerts

• Add proper code comments

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

• Implement validation errors.

• Follow angular best practices

• No linting errors.

• No errors with prod build.

• All data should come from JSON, don’t use inline HTML for content.

Final Submission Guidelines

Submit the zip containing

• Angular source code with detailed readme