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

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


# **Acceptance criteria**

* There is a new widget for the Time & Costs module shown on the Overview page only

* Widgets shown only if TIme and Costs module is activated in the project.

* When 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: Begin of the insertion`Log time` _\-> /my/time-tracking/_

End of the insertion Begin of the deletion _tbd_

End of the deletion * Begin of the deletion _Open: where should such a button lead to? Time report?_

* End of the deletion The new widget is called "**Time and costs**". It is a stacked bar chart for monthly actual costs:

* Each bar represents a month. Begin of the insertion

End of the insertion Begin of the deletion It shows the 12 month of the current year

End of the deletion * Begin of the insertionThe number of bars is limitedEnd of the insertion Begin of the deletion Open: Shall we add an optionEnd of the deletion to Begin of the insertion12 months.

End of the insertion Begin of the deletion change that? E.g. to a weekly view? Or to a certain time frame?

End of the deletion * In the top right, there is a

* checkbox "Include Begin of the insertioncosts from sub-items"End of the insertion Begin of the deletion sub-reports"End of the deletion

* Button with ActionMenu behind it, to select a grouping criteria

* Options: "User", "Subitem"

* Default: "User"

* The shown data:

* User: `TimeEntry.costs` (_time x hourly rate)_

* Subitems: `TimeEntry.costs.group_by(:workspace)`

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

* Depending on the selected scope in the button, 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 a cost type

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

## **Technical notes**

* We stick to the chart libary chart.js


## **Permissions and visibility considerations**

* _We use the existing permissions._


## **Translation considerations**

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


## **Out of scope**

* Changes to the Time &amp; Costs module module.

* New widgets for the Dashboard Begin of the insertion

* Options to remove sub-reports

* Switch to weeks, days or quartersEnd of the insertion