Hestia - Locations MDM- Responsive Angular Frontend Dev Part 1

Challenge Summary

Welcome, everyone! The goal of this challenge is to create the frontend app from a given design using Angular.

Project Overview

In this challenge, we are looking to design a user-friendly interface design for Ferguson’s Locations MDM Application. This web-based application will allow an effective process for employees to view, manage, and maintain Locations data.

The Ferguson team is currently using a cumbersome spreadsheet and interface to view information about their numerous locations. A large amount of complex data is not easily organized into views that are helpful or efficient for users to extract the information they need. Ferguson is looking for a more robust and user-friendly method to see and manage this wealth of data.

Below are general concepts:

the campus is the parent unit of a location. There may be multiple Locations within that Campus, and multiple Child Locations within that Location. The data can be drilled into 3 distinct hierarchies, with attributes to organize the data in a cascading way. These 3 hierarchies and grouping attributes are:

• Base Structure – Campus > LOB > Child Location (e.g. Showroom, Counter, Warehouse, etc.): Result: List of Locations
• Physical Hierarchy: Region > State > City > Child Location Type > : Result: List of Locations
• Management Hierarchy: LOB > Region > District > Area > LOB Cost Center > Inventory Org : Result: List of Locations

Each location will be associated with all of the available attributes and values (from all 3 hierarchy paths). These details will be available for display (or edit) when the user selects a specific Location to view (Locations Detail screen).

In these series of challenges to build the frontend, we are starting from the home, location detail, and “change history” pages.

After this challenge, we will build other remaining screens in the follow-up challenges.

Technology Stack

Angular 10, TypeScript, SCSS, HTML 5

Browser Requirements

Windows: IE 11+, Edge, Chrome latest
Mac: Safari Latest, Edge, Chrome Latest
iOS Mobile & Tablet: Chrome & safari
Android Mobile & Tablet: Chrome

Assets

The following items are shared on the forum

• Design source file developed on Adobe  Xd
• Marvel App

Individual Requirements

Authentication: This will be done in the future challenges with Single Sign-On using Azure Active Directory.

Roles: The application will be role-based access control(RBAC). There will be the following roles. 

• Normal User: Can view only
• Editor: can view and edit locations data
• Admin: can view, edit, and create new location details as well.

Implement the screens related to 

• Mock Login screen
  • Create a mock screen which will set the current user with the appropriate role
  • This will be later replaced with Azure Active Directory(SSO). So keep it simple and separate
• Home Screen

https://marvelapp.com/prototype/21b24c16/screen/66825411

Counts: shows summary of locations
Locations Recently Updated: maximum 5, listed by update time, descending

• View Locations By: This will allow finding locations by cascading in 3 ways, all options will come from API.
  • Base Structure – Campus > LOB > Child Location (e.g. Showroom, Counter, Warehouse, etc.) then produces the result: List of Locations
  • Physical Hierarchy: Region > State > City > Child Location Type then produces the result: List of Locations
  • Management Hierarchy: LOB > Region > District > Area > LOB Cost Center > Inventory Org then produces the result: List of Locations

• ���"Find a Location By": This will find the locations by search and filter

• Location Detail: screen related to location details including drill down.

• Change History

• Common Items for all role

• Please create all menus for based on the current user’s role
  • Home (all users)
  • Location Detail (all users but a feature like editing and creating new is role-based, the editor can edit, while admin can edit as well create new)
  • Change History (all users)
  • Manage Addresses (Admin only): empty page for now
  • Manage Calendars (Admin only): empty page for now
  • Manage Employee Roles (Admin only): empty page for now

 

The details of the screen with the business flow is shared on the forum. If there is any confusion let's clarify on the forum.

General Requirements

• This application should be a fully responsive app
• Do not use browser alerts
• Add proper code comments
• Implement validation errors.
• Follow angular best practices
• No linting errors.
• No errors with prod build
• Divide the components into meaningful components that can be reusable
• All data should come from a mock API.

Final Submission Guidelines

Submit the zip containing

• Angular source code with a detailed readme and verification guide
• Verification guide should show flow for a different role