**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. Begin of the insertion

* Widget shown only if `view_budgets` permission is grantedEnd of the insertion

* 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 (€) Begin of the insertion

* The values for those widgets are build by Labour costs, Unit costs, and base amount

* Technical note: All of that already exists as method on the Budget


End of the insertion Begin of the deletion


End of the deletion <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 &quot;**Total Budget by cost type**&quot; which shows a pie chart with all cost types currently in use

* Begin of the insertionLabour costs are also shown as an additional cost type (unless it is 0).

* Base amount is also shown as an additional cost type (unless it is 0).

* End of the insertion There is a link at the bottom &quot;View budget details&quot; redirecting to the budget index page (&quot;/budgets&quot;) of the current project Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * The link opens in a new tab to avoid flow interruption Begin of the insertion

* Technical note: These are `MaterialBudgetItem` and `LaborBudgetItem`End of the insertion


<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 &quot;**Actual cost per month**&quot;. It is a stacked bar chart for monthly actual costs:

* Each bar represents a month.

* The current month as well as the last 5 months before are shown

* The sum per month is shown at the top of each bar

* Colors indicate cost types.

* Labour costs are also shown as an additional cost Begin of the insertiontype (unless it is 0).End of the insertion Begin of the deletion type.End of the deletion

* There is a link at the bottom &quot;View actual cost details&quot;

* 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 Begin of the insertion

* Technical note: These are `CostEntry` and `TimeEntry` which share a common interface


End of the insertion Begin of the deletion


End of the deletion <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 Begin of the insertionvisible subitems**End of the insertion Begin of the deletion children**End of the deletion

* When aggregating, make sure to not count budgets in the hierarchy twice

* Example:

* Program X: 4€ (aggregated)
\-- own Budget: 2€
\-- Project X.A: 1€
\-- Project X.B: 1€

* Begin of the insertionPortfolioEnd of the insertion Begin of the deletion ProgramEnd of the deletion Y: 6€ (aggregated)
\-- own Budget: 2€
\-- Begin of the insertionProgramEnd of the insertion Begin of the deletion ProjectEnd of the deletion Y.C: 1€
\-- Begin of the insertionProgramEnd of the insertion Begin of the deletion ProjectEnd of the deletion Y.D: 3€ (aggregated)
&nbsp; -- own Budget: 1€
  -- Project Y.D.1: 1€
  -- Project Y.D.2: 1€

* There is a short summary written to explain that the budget is aggregated (e.g. &quot;Data aggregated from 16 budgets included in the portfolio, 5 subprograms, and 15 subprojects&quot;)


## **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