Challenge Overview
Challenge Objectives
-
Develop UI prototype for Bunker Desk Toolkit application - tanks&barges and traffic signal view
Project Goal
The intent of this project is to create an MVP web application - Bunker Desk Tool Kit - to manage the activities currently done with a combination of excel tools and manual tasks. Using the new web application, users will be able to:
-
Schedule bunker deliveries and resupply movements
-
Report and communicate effectively with third-party terminals, barges, and agents
-
Provide optimal blend opportunities
-
Update Marketers and Traders of the status of inventories and deliveries
In this challenge, we will implement scheduler and marketing dashboards. Future challenges will implement admin pages.
Technology Stack
-
Angular 9
-
SCSS
Assets
Base code is available in Gitlab. See forums for access to the project repository.
Marvel app link and design assets are available in the forums
Individual requirements
We’re not implementing the complete app in this challenge - only a subset of screens is in scope, and for those in scope only the desktop version is required. Note that we will have different layouts for mobile in the future and you should design the layouts so that minimal refactoring is required to support mobile design in the future. Navigation/header already supports mobile view so pay attention not to break anything.
Application has 3 types of users - Administrators, Schedulers, and marketers. We have a mock login page (there will be an SSO login in the future) where you can select a user type. We will work with scheduler and marketer screens in this challenge
Two major pages in scope are:
-
Scheduler tanks and barges screens (including all the popups)
-
Marketer traffic view screen
Looking at the marvel app, screens in scope are 28-37 and 69-73.
Follow the current base code for code organization and mock data services - no data should be hardcoded in the components except for the fixed labels.
Use d3js for application charts.
Terminal tanks and barges
This view shows the inventory status for tanks/barges/products as chart visualizations. Users can toggle between tanks and barge inventory view.
There are 3 views for tank inventory - chart, table, and tank - all of them show the same data in different ways. Users can select a date range and tanks to include in the visualization.
Barges inventory can be shown with two views - a chart and a table.
Make sure to create reusable components for tank view as it will be used in a different page in the future
Marketing dashboard - Traffic Signal
This view shows the orders and barges availability data:
-
Marketer can provide a date range to get sale summary view for the port on each day and filter the results using a free text field e.g. Ship name: YM Maturity needs 1500 MT LSFO on delivery dates ranging from 10th -11th Feb.
-
Red signifies that no sale can be made.
-
Yellow signifies the sale can be made but with some consultation.
-
Green signifies inventory available for the marketer to sell in the market.
Submission Guidelines
-
Submit the full app code
-
Submit a Readme with details on how to configure, build, run the app