# Feature DREAM-503 - Overview widget for costs and spent time

Project: Stream Design System
Status: in specification
URL: https://community.openproject.org/work_packages/DREAM-503

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Medium |
| Target versions | Product Backlog |
| Sprint |  |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

_No work packages_

## Technical Details

| Attribute | Value |
| --- | --- |
| Module | Modules and project features / Project overview, Modules and project features / Costs and budgets, Frontend components and Primer design system |
| Feature Flag |  |
| Requires doc change | Yes |
| Enterprise plan | Community (COM) |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups | https://www.figma.com/design/kjzHe0qOLme1LXCjLoTBFV/Overview-and-Dashboard?node-id=585-21108 |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee | Henriette Darge |
| Accountable |  |
| Product manager |  |
| Developers |  |
| Designer | Marc Alcobé |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

**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: `Log time` *-\> /my/time-tracking/*

  - The new widget is called "**Time and costs**". It is a stacked bar chart for monthly actual costs:
    
      - Each bar represents a month.
    
      - The number of bars is limited to 12 months.
    
      - In the top right, there is a
        
          - 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">

<br>

\-----

Taken from <mention class="mention" data-id="66124" data-type="work_package" data-text="##66124">##66124</mention>

  - 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 visible subitems**
            
              - 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€
                
                  - Portfolio Y: 6€ (aggregated)  
                    \-- own Budget: 2€  
                    \-- Program Y.C: 1€  
                    \-- Program Y.D: 3€ (aggregated)  
                      -- 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. "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**

  - *No new terms planned. We use the existing translations strings.*

## **Out of scope**

  - Changes to the Time & Costs module module.

  - New widgets for the Dashboard

  - Options to remove sub-reports

  - Switch to weeks, days or quarters