**As** a project manager, portfolio manager and program manager
**I want to** see the costs and spent time on my Overview page
**so that** I easily get an overview of the financial plan and status.

Begin of the insertion#End of the insertion **Motivation**

* Understand how much money was spent.

* Understand the costs incurred.

* Make the project overview more useful and engaging.

* Improve onboarding of OpenProject in general

* Reduce churn of OpenProject in general


Begin of the insertion#End of the insertion **Acceptance criteria**

* Begin of the insertionThere is a new widget for the Time & Costs moduleEnd of the insertion Begin of the deletion WidgetEnd of the deletion shown Begin of the insertionon the Overview pageEnd of the insertion only Begin of the insertion

* Widgets shown onlyEnd of the insertion if Begin of the insertionTImeEnd of the insertion Begin of the deletion TimeEnd of the deletion and Begin of the insertionCostsEnd of the insertion Begin of the deletion costsEnd of the deletion module is activated in the project. Begin of the insertion

End of the insertion Begin of the deletion

End of the deletion * Begin of the insertionWhen no time has been logged yet, the widget shows a Blankslate with

* icon: op-cost-reports

* header: Start tracking your time and costs

* Description: Get an overview of the current costs to monitor progress of your project.

* (Primary) Button: _tbd_

* _Open: where should such a button lead to? Time report?_

* The new widget is called "**Time and costs**". It is a stackedEnd of the insertion Begin of the deletion StackedEnd of the deletion bar chart Begin of the insertionfor monthly actual costs:

* Each bar represents a month. It shows the 12 month of the current year

* Open: Shall we add an optionEnd of the insertion to Begin of the insertionchange that? E.g. to a weekly view? Or to a certain time frame?

End of the insertion Begin of the deletion show costs over time.

End of the deletion * Begin of the insertionInEnd of the insertion Begin of the deletion SelectEnd of the deletion the Begin of the insertiontop right, there is a

* checkbox "Include sub-reports"

* Button with ActionMenu behind it, to select aEnd of the insertion grouping Begin of the insertioncriteria

End of the insertion Begin of the deletion criteria:

End of the deletion * Begin of the insertionOptions: "User", "Subitem", "Cost type"

End of the insertion Begin of the deletion Cost type

End of the deletion * Begin of the insertion_open: "Cost type" is already shown in the Budget widget. Is it needed here again?_

End of the insertion Begin of the deletion User

End of the deletion * Begin of the insertionDefault: "User"

End of the insertion Begin of the deletion Sub-item (Program, Project, Sub-project)

End of the deletion * Begin of the insertionThe values areEnd of the insertion Begin of the deletion Option to excludeEnd of the deletion costs Begin of the insertioncreated by logged time based on the user rate

End of the insertion Begin of the deletion from sub-elements

End of the deletion * Begin of the insertion_Open: True? Or shall we rather showEnd of the insertion Begin of the deletion OpenEnd of the deletion the Begin of the insertionlogged time?_

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

* Depending on the selected scopeEnd of the insertion Begin of the deletion detailsEnd of the deletion in the Begin of the insertionbutton, the Colors indicate different things:

* "User": each color represents a user. Only the first 5 users are shown, the rest is aggregated and shown as "+X users" in the legend

* "Subitem": one color for (all aggregated) subportfolios, subprograms, and subprojects

* "Cost type": each color represents aEnd of the insertion cost Begin of the insertiontype

* There is a link at the bottom "View all reports"

* It leads to the Cost reports with filter for the project (and possibly sub projects), and date spend is between the 01.01. and 31.12 of the current year

* The link opens in a new tab to avoid flow interruption


<img class="image_resized op-uc-image op-uc-image_inline" style="width:745px;" src="/api/v3/attachments/793572/content"><img class="image_resized op-uc-image op-uc-image_inline" style="width:759px;" src="/api/v3/attachments/793573/content">

##End of the insertion Begin of the deletion report module


End of the deletion **Technical notes**

* We stick to the chart libary chart.js


Begin of the insertion##End of the insertion **Permissions and visibility considerations**

* _We use the existing permissions._


Begin of the insertion##End of the insertion **Translation considerations**

* _No new terms planned. We use the existing translations strings._


Begin of the insertion##End of the insertion **Out of scope**

* Changes to the Begin of the insertionTime &amp; Costs moduleEnd of the insertion Begin of the deletion budgetEnd of the deletion module.

* Begin of the insertionNew widgets forEnd of the insertion Begin of the deletion Include this information inEnd of the deletion the Begin of the insertionDashboardEnd of the insertion Begin of the deletion API (separate work package).End of the deletion