PPL SPA - Creation of the Project Entry & Maintenance Screen

Problem Statement

In the main screen, the PPL need to be able to access the project they manage and execute 4 types of actions: create a new entry, edit an entry, delete an entry, access the summary dashboard

Screen is divided into 5 sections:

• main tracker at the top, to help navigate / consult projects
• main tracker section host the NEW / EDIT / DELETE buttons
• main tracker has a selection of key fields to show (not all fields are shown)

The other sections are project specific

• project header
• project attributes
• Impacted sites & products
• Project Milestones
• Finance and Resourcing

UI framework below can be followed to replicate the look & feel (enclosed pictures)

IMPORTANT UI UPDATE

The project specific section would be accessed via TAB navigation to try to keep it all in one screen without scrolling down,   rather than collapsible panels in current design. (List of tabs and corresponding fields is enclosed). PLease see additional PPT file and Excel file to explain how the UI should now look like compared to initial Figma version.

▶ Page 1 - PPL SPA Tool (figma.com)

Acceptance Criteria

• Follow guidance enclosed in the ppt design document
• Each section are created with the required corresponding fields
• Edit capabilities are only granted to BSL/PPL users