Content
Updated by Rosanna Sibora 12 days ago
**As** a project manager, portfolio manager and program manager
**I want to** see the budgets on my Overview page
**so that** I easily get an overview of the financial plan and status.
# **Motivation**
* Understand how much budget was planned, spent and is available.
* Make the project overview more useful and engaging.
* Improve onboarding
* Reduce churn
# **Acceptance criteria**
* There are multiple new widgets for the Budgets module shown on the Overview page only
* Widgets shown only if Budgets module is activated in the project.
* When no budgets are currently available, there is only one widget which shows a Blankslate with
* icon: "op-budget"
* header: "Start project controlling" (for portfolios it will adpted to "Start portfolio controlling", same for programs)
* Description: Get an overview of your budgets and costs to efficiently track the health status of your project (program/portfolio).
* (Primary) Button: "+ Budget" (will lead to the budget creation page)
<img class="image_resized op-uc-image op-uc-image_inline" style="width:613px;" src="/api/v3/attachments/792392/content">
* Show 4 small widgets next to each other which display the following title and its value only:
* Total planned budget actual costs (€)
* Total actual costs planned budget (€)
* Spent ratio budget (%)
* Remaining budget (€)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789564/content"></div></figure>
* A new widget called "**Total Budget by cost type**" which shows a pie chart with all cost types currently in use
* There is a link at the bottom "View budget details" redirecting to the budget index page ("/budgets") of the current project
* The link opens in a new tab to avoid flow interruption
<figure class="image image_resized op-uc-figure" style="width:336px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789565/content" alt="pie chart for Budget by cost type"></div></figure>
* There is a new widget called "**Actual cost per month**". It is a stacked bar chart for monthly actual costs:
* Each bar represents a month.
* The last 6 month are shown
* Colors indicate cost types.
* Labour costs are also shown as an additional cost type.
* There is a link at the bottom "View actual cost details"
* It leads to the Cost reports with filter for the project (and possibly sub projects), and date spend is at least the month shown in the diagram
* The link opens in a new tab to avoid flow interruption
<figure class="image image_resized op-uc-figure" style="width:390px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789566/content"></div></figure>
* Depending on the workspace and hierachy, the shown data is different:
* **Case 1: Single project only**
* All widgets display the **summed values of all budgets used within that project**
* **Case 2: Aggregation for portfolios, programs and sub-projects**
* All widgets display the **summed values of all budgets of itself and all children**
* _\[Open\] True? Only direct children?_
* There is a short summary written to explain that the budget is aggregated (e.g. "Data aggregated from 16 budgets included in the portfolio, 5 subprograms, and 15 subprojects")
## **Technical notes**
* We stick to the chart libary chart.js
## **Permissions and visibility considerations**
* _We use the existing permissions._
## **Translation considerations**
* _Key terms and phrases in the key languages_
## **Out of scope**
* Changes to the budget module.
* Include this information in the API (separate work package).
* New widgets for the Dashboard
**I want to** see the budgets on my Overview page
**so that** I easily get an overview of the financial plan and status.
# **Motivation**
* Understand how much budget was planned, spent and is available.
* Make the project overview more useful and engaging.
* Improve onboarding
* Reduce churn
# **Acceptance criteria**
* There are multiple new widgets for the Budgets module shown on the Overview page only
* Widgets shown only if Budgets module is activated in the project.
* When no budgets are currently available, there is only one widget which shows a Blankslate with
* icon: "op-budget"
* header: "Start project controlling" (for portfolios it will adpted to "Start portfolio controlling", same for programs)
* Description: Get an overview of your budgets and costs to efficiently track the health status of your project (program/portfolio).
* (Primary) Button: "+ Budget" (will lead to the budget creation page)
<img class="image_resized op-uc-image op-uc-image_inline" style="width:613px;" src="/api/v3/attachments/792392/content">
* Show 4 small widgets next to each other which display the following title and its value only:
* Total planned budget
* Total actual costs
* Spent ratio
* Remaining budget (€)
<figure class="image op-uc-figure"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789564/content"></div></figure>
* A new widget called "**Total Budget by cost type**" which shows a pie chart with all cost types currently in use
* There is a link at the bottom "View budget details" redirecting to the budget index page ("/budgets") of the current project
* The link opens in a new tab to avoid flow interruption
<figure class="image image_resized op-uc-figure" style="width:336px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789565/content" alt="pie chart for Budget by cost type"></div></figure>
* There is a new widget called "**Actual cost per month**". It is a stacked bar chart for monthly actual costs:
* Each bar represents a month.
* The last 6 month are shown
* Colors indicate cost types.
* Labour costs are also shown as an additional cost type.
* There is a link at the bottom "View actual cost details"
* It leads to the Cost reports with filter for the project (and possibly sub projects), and date spend is at least the month shown in the diagram
* The link opens in a new tab to avoid flow interruption
<figure class="image image_resized op-uc-figure" style="width:390px;"><div class="op-uc-figure--content"><img class="op-uc-image" src="/api/v3/attachments/789566/content"></div></figure>
* Depending on the workspace and hierachy, the shown data is different:
* **Case 1: Single project only**
* All widgets display the **summed values of all budgets used within that project**
* **Case 2: Aggregation for portfolios, programs and sub-projects**
* All widgets display the **summed values of all budgets of itself and all children**
* _\[Open\] True? Only direct children?_
* There is a short summary written to explain that the budget is aggregated (e.g. "Data aggregated from 16 budgets included in the portfolio, 5 subprograms, and 15 subprojects")
## **Technical notes**
* We stick to the chart libary chart.js
## **Permissions and visibility considerations**
* _We use the existing permissions._
## **Translation considerations**
* _Key terms and phrases in the key languages_
## **Out of scope**
* Changes to the budget module.
* Include this information in the API (separate work package).
* New widgets for the Dashboard