ABC Price Optimisation Web App - General and Price Admin Pages Prototype

Challenge Objectives

• Implement the general and price admin pages from the web app.
• The scope is 6 ~ 8 unique screens.

 
Project Background

• Our client who is a worldwide IT company would like to modernise the UI of one of its internal web applications, which is a price optimization tool. They are satisfied with the flow and the interaction within the current app, so they would like to keep those and would like to have a more modern style for the UI.
• The application is used to support price management through several functions and has many modules.
• The application contains many complicated tables which mostly consume dynamic data.

 
Technology Stack

• Angular 8
• HTML5
• Javascript
• CSS
• Bootstrap (optional)

 
API Integration
Although the API is not ready yet, you need to implement simple controllers to fetch the data showing in the app from JSON files. We should be able to replace the JSON files with actual API calls to integrate the app with the backend without much effort so hard coded data is not acceptable.
 
Dynamic Table Component
This prototype must utilize the dynamic table component provided in the forum to implement the pages.
 
Please note that if the dynamic table component has bugs, fixing the bugs to satisfy the need of this challenge is in scope.
 
Screen requirements
Below is the list of screens that are supposed to be implemented in the prototype, basically all the 25 screens from design are in scope. Please cross compare this with the design, and if you see any inconsistencies or have any questions, raise them in the forum for clarification / confirmation.
 
General Module
All the users have access to  this module that consists of 2 screens.

1. Home Screen
The landing screen of the application is the home screen, which contains the top and left navigation. Please refer to the design.

• MPO menus are located on the left side bar grouped in modules. The visibility of the modules is limited by role. The side bar can be collapsed or expanded so as the modules within.
• The top menu has the profile information and 4 other menu items that are independent from the modules: About, Training, Support and Log out.

 
2. User Dashboard
Please refer to the design. To implement the screens, please use the data that you can see from the design we provided.
The user dashboard shows price round statuses for the user:

• Error during submission
• Partially Approved / Rejected / Submitted error
• Approved

 
3. Price Admin Module
The Price Admin module contains screens/functions that let the user set up default values/master data that will be used throughout the application for different calculations and simulations. For this challenge you’ll implement the following 3 sections in the Price Admin module:

3.1 Default Price Method List
A price method is the logic to set or calculate prices. Depending on the price method, the required input/parameter to calculate the price is different. The price method formula determines what is required and how the price is calculated. The default price method is assigned at the geo hierarchy, Pricing Hierarchy level (class, family, series or model) and Product Hierarchy, so that a price method can be determined for each product in a pricing scenario. Please also implement the confirmation popup message for deletion as you can see in the design.

• The main content of this screen contains the already created default price methods in a table. Please refer to the design.
• The following actions can be performed on the screen:
  • Create a new record aka a default price method.
  • Download a template
  • Import
  • Export
  • Delete (can also be triggered with the delete button on keyboard)
  • Filter based on regions, with a dropdown to select a specific region in which we are searching (values: All Regions, Americas, EMEA, Asia Pacific)
  • Help
• The table should be implemented using the dynamic table component, and be styled to match our design. Pagination / searching / filtering / etc… must all work and they are all done on client side.

3.2 New Default Price Method Popup
On this screen the user adds a new association of a pricing method and a geo hierarchy, Pricing Hierarchy and Product Hierarchy combination. There are six price methods supported in MPO which are: Fixed, Cost Plus, Multiplier, Street Price Dealer Margin, Street Price List Price and LP=SP-VAT. Please refer to the design. The flow is as follows:

• First the user browses in a tree structure for the geo setting concerned, e.g. “United States - US”, and adds it to the selection.
• Then he searches the pricing hierarchy the same way and selects one setting, e.g. “Business Desktop PCs - 23J0”
• The product hierarchy setting is the next, the task is similar: selecting a setting from a tree structure, like “TA - Mobile Workstations”
• The price method will be selected for the above segment from a dropdown, e.g. “Fixed Value”.
• Target GPM (Gross Profit Margin) is also to be added which is a percentage value, like “10%”
• After everything has been selected/filled in the user can save the new default price method.
• Please implement the success message popup as well to close the creation of the new setting.

3.3 Target GMP list
This admin screen is used to define the financial Target GPM% to display for reference in price setup and analytics. The financial Target GPM% is set at the geo hierarchy and product hierarchy level. Please refer to the design (use the same method/location for actions throughout the app, even if this screen for instance has a different solution).

• Similarly to the default price method setting and creation, the user can see a list of target GPM associations in a table. Please refer to the screenshot or prototype.
• The following actions can be performed on the screen:
  • Create a new record aka a target GMP.
  • Download a template
  • Import
  • Export
  • Delete (can also be triggered by the delete key on keyboard)
  • View import results
  • Search with a dropdown to select based on what we are searching
  • Help
• The table should be implemented using the dynamic table component, and be styled to match our design. Pagination / searching / filtering / etc… must all work and they are all done on client side.

 
3.4 New Target GMP
On this screen the user adds a new association of a target GMP and a geo hierarchy, and Product Hierarchy combination. Please refer to the design. The flow is as follows:

• First the user browses in a tree structure for the geo setting concerned, e.g. “EMEA - 02”, and adds it to the selection.
• The product hierarchy setting is the next, the task is similar: selecting a setting from a tree structure, like “TA - Mobile Workstations”
• Target GPM (Gross Profit Margin) is also to be added which is a percentage value.
• After everything has been selected/filled in the user can save the new default price method.
• Please implement a success message popup as well to close the creation of the new setting.

 
General Requirements

• Make sure you don’t just copy & paste code to create the UI, it’s very important to maintain code reusability so that integration will be easier later. This will be evaluated in the scorecard as a major requirement.
• Do NOT use global z-indexes.
• No errors with production build.
• Minimum supported width should be 1366px
• The data to be displayed must come from local JSON files and cannot be hardcoded.
• The main content should have fluid width to fill all available space.
• Pagination should work whenever applicable.
• Must use Angular 8 and follow the provided design.
• The pages should clearly indicate invalid input data to users, for example: if user tries to submit a page without providing a required text field, the textbox should be highlighted with an error message
• Must follow Angular best coding practices
• You are expected to create a detailed README file including information on how to setup, run and verify your application.

 
HTML Requirements

• HTML should be valid HTML5 compliant.
• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

 
Code Requirements

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• 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.
• All CSS naming should not have any conflicts.
• You’re free to choose between CSS & SCSS but you need to use flex instead of float.
• Follow a clean folder structure.
• Use CSS3 Media Queries to load different styles for each page and don't build different pages for different devices / layout.
• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page.
• Make sure npm run build works without any errors.

 
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 typescript and 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
• Mac: Safari Latest, Chrome 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.