Challenge Overview
Challenge Objectives
-
Develop UI prototype for Bunker Desk Toolkit application - forecast availability and oil specs 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 support 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 screens in this challenge
Two major pages in scope are:
-
Scheduler forecast availability screens
-
Current and historical specs screens
Looking at the marvel app, screens in scope are 52-59.
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.
Forecast availability
This view allows the user to estimate how much oil can be quoted, based on the current oil volume in the tanks. Replace date range selector on the left side with a single date selection. Once a date is selected, the app will show the oil inventory on that date. Once the user selects the tanks to use for the forecast, a list of final oil products that can be produced from oil in those tanks is shown. Once the target product is selected, users can click the “view forecast” button that shows how much of that product is available for sale on the selected forecast date. If the target blend(MT) value is entered, the app will show if that amount is available for sale (ie it’s less than the available value). Remove the “Percentage” input field.
Current and Historical Specs
This view shows the current and historical oil properties for each oil tank. Remove the date selection for the “current” specs. Tanks selection allows the user to filter the view of each tank. Historical view shows the same data as a chart and the user can select a value that is displayed on the chart (viscosity, API, sulfur percentage, ..)
NOTE: winner will be required to submit a merge request to the challenge and resolve any merge conflicts
Submission Guidelines
-
Submit the full app code
-
Submit a Readme with details on how to configure, build, run the app