Key Information

Register
Submit
The challenge is finished.

Challenge Overview

Challenge Overview

  • Build the responsive prototype for Asset Invoicing UI Design

 

Project background

  • The client of this challenge is a global electronic device and its related components manufacturer 

  • They would like to improve the efficiency/turn around time in their manufacturing-related supply chain sub-process(s)  and ensure its transparency by providing the status of electronic device(s) / component(s) at various stages, visible to all the concerned stakeholders through the digital technologies like Blockchain and form the blockchain consortium among the various stakeholders as mentioned below

  • The solution also will automate the process across manufacturing unit, 3rd party leasing company, 3rd party installation party, invoicing unit, customers and multiple internal departments involved throughout a device leasing cycle

  • Currently, the sub-processes like Invoicing process and Asset Tracking are considered for this challenge:

    • End Customer

    • Leasing Partner

    • Supply Chain Team

    • Installation Partners

    • Manufacturing Unit

 

Technology Stack

 UI Requirements

Here is the marvel-app: https://marvelapp.com/84j6fc7 (all screens are in scope). 

API INTEGRATION

We will proivde the mock api endpoints, and you should get the prototype working with mock apis. 

 

Authorization Guard should be implemented according to the permission matrix below:

 

SCREEN REQUIREMENTS

We’ll provide design source file and the marvelapp link in the forum.

 

Login (S0_01 -> S0_02)

  • Call the POST /login api, and the api response contains a role attribute to indicate the role of the logged-in user. 

  • SSO integration.

 

End Customer Pages (S1_00 -> S1_11)

 

Dashboard (S1_01)

  • Circle Charts - Call the GET /statuses/counts?customerName=xxx API

  • Recent Orders - Call the GET /orders?customerName=xx with pageSize = 5, pageNumber = 1, sortDirection = desc and sortColumn = purchaseOrderDate

  • Recent COAs - Call the GET /coas?customerName=xxx with pageSize = 5, pageNumber = 1, sortDirection = desc and sortColumn = customersigneddate

  • Recent COA By Agreements - Call the GET /coasbyagreements?customerName=xxx with pageSize = 5, pageNumber = 1, sortDirection = desc and sortColumn = acceptancedate

  • Recent Invoices - Call the GET /invoices? customerName=xxx with pageSize = 5, pageNumber = 1, sortDirection = desc and sortColumn = invoicedate

 

Orders (S1_02)

  • Order Counts - Call the GET /statuses/counts?customerName=xxx API

  • Orders Table - Call GET /orders?customerName=xxx with specified pageSize and pageNumber to load orders

    • free-text search - use “search” parameter name

 

Order Details (S1_03)

  • Call the GET /orders/{orderno} API to get the order details

  • Open Item - Search the records - do free text filtering for the items locally

 

COAs (S1_04)

  • COAs Counts - Call the GET /statuses/counts?customerName=xxx API

  • COAs Table - Call the GET /coas?customerName=xxx with specified pageSize and pageNumber 

    • free-text search - use “search” parameter name 

COA Details (S1_05)

  • for not signed COA

  • Call GET /coas/{coano} to get the COA details

  • To sign the coa, call the PUT /coas/{coano}/sign API

    • signature-date is not needed, remove it from UI. 

    • Only end customer can sign it

 

COA Details (S1_06)

  • for signed COA

  • Call GET /coas/{coano} to get the COA details

  • This section on the page should be loaded from a template configuration file, so that client can easily update the text.  

 

 

COA By Agreements (S1_07)

  • COA By Agreements Counts - Call the GET /statuses/counts?customerName=xxx API

  • COA By Agreements Table - Call the GET /coabyagreements?customerName=xxx with specified pageSize and pageNumber 

    • free-text search - use “search” parameter name

 

COA By Agreement Details (S1_08)

  • for not signed

  • Call GET /coabyagreements/{coabyagreementno} API

  • To sign the agreement, call the PUT /coabyagreements/{coabyagreementno}/sign API

    • Only end customer can sign it

 

This section on the page should be loaded from a template configuration file, so that client can easily update the text. 

  • dynamic values should be from user input or API data

 

COA By Agreement Details (S1_09)

  • for signed

  • Call GET /coabyagreements/{coabyagreementno} API

 

Invoices (S1_10)

  • Invoice Counts - Call the GET /statuses/counts?customerName=xxx API

  • Invoices Table - Call the GET /invoices?customerName=xxx with specified pageSize and pageNumber 

    • free-text search - use “search” parameter name

 

Invoice (S1_11)

  • please demonstrate both draft and accepted invoice

  • Call the GET /invoices/{invoiceno} API

 

Leasing Partner (S2_00 -> S2_10)

  • Mostly the same as the End Customer

  • S2_08 - Only user with this role can create an agreement (from a button on S2_06)

 

Create Agreement (S2_08)

  • Call POST /coabyagreements API

  • Same as above, it should be from the same template - remove the acceptance user input boxes

 

Supply Chain Team (S3_00 -> S3_11)

  • Mostly the same as End Customer

  • S3_10 & S3_11 - Only user with this role can create an invoice

 

Create Invoice (S3_10 & S3_11)

  • Call PUT /invoices/{invoiceno} to update the invoice

  • Only Invoice with Draft status can be updated (or created)

  • After the API call, the invoice is updated to Active

 

Installation Partner (S4_00 -> S4_05)

  • User with this role can only access COAs and Orders

  • Only user with this role can update the device status

 

Manufacturing Unit (S5_00 -> S5_05)

  • User with this role can only access COAs and Orders


 

GENERAL REQUIREMENTS

  • Must use Angular 8 and follow the provided design. The app should be implemented as PWA. 

  • Column Settings should be saved to the local storage

  • 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), and restrict user inputs based upon data type (for example, for a year input, user should only be allowed to input numbers). 

  • 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

  • interface should be created for types and any type should be avoided. 

  • Do not create a single .scss file for the whole app. Each component should have its own stylesheet file. You should also define variables and common scss for the whole application to avoid duplication. 

  • Ensure that there are no lint errors.

  • You should use SCSS and you need to use flex instead of float.

  • Follow a clean folder structure: https://itnext.io/choosing-a-highly-scalable-folder-structure-in-angular-d987de65ec7

  • Create small and reusable components.

  • Auth and Role Guard must be implemented

  • Follow Angular Style Guide: https://angular.io/guide/styleguide

  • Follow Angular Best Practice

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, Firefox latest

  • Mac: Safari Latest, Chrome Latest, Firefox Latest

  • Implementation should be responsive, and we will add support for tablet and phone later

 


 



Final Submission Guidelines

Submission Deliverable

  • Source code

  • Deployment Guide and Verification Guide

ELIGIBLE EVENTS:

2020 Topcoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30115523