# Feature DREAM-426 - Overview widget for Budgets Project: Stream Design System Status: closed URL: https://community.openproject.org/work_packages/DREAM-426 ## Planning | Attribute | Value | | --- | --- | | Date | | | Priority | High | | Target versions | 17.2.0 | | Sprint | | | Backlog bucket | | | Votes | | | List | | | Roadmap | | | Relevance | | ## OPEN POINTS / FEEDBACK _No work packages_ ## Features and Chunks _No work packages_ ## Bugs and other work packages | ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module | | --- | --- | --- | --- | --- | --- | --- | --- | | OP-18985 | Bug | Budgets widget: Data from subitems is not aggregated if workspace type is not Portfolio | closed | | 17.2.0 | | Frontend components and Primer design system, Modules and project features / Costs and budgets, Modules and project features / Project overview | | OP-18923 | Bug | Replace EUR with € in cost currency setting default and harmonize widgets | closed | | 17.2.0 | | Modules and project features / Project overview, Modules and project features / Costs and budgets | | DREAM-622 | Bug | Titles and totals are cut off | closed | | 17.2.0 | | Modules and project features / Project overview, Modules and project features / Costs and budgets | | DREAM-637 | Bug | Rephrase 'Budget by cost type' subtitle for portfolios | closed | | 17.2.0 | | Modules and project features / Project overview, Modules and project features / Costs and budgets, Frontend components and Primer design system | | DREAM-636 | Bug | Chart doesn't expand and Cost list is cut when costs go over budget | closed | | 17.2.0 | | Frontend components and Primer design system, Modules and project features / Costs and budgets, Modules and project features / Project overview | | DREAM-635 | Bug | Colors in the 'Actual cost per month' graph legend and on the chart do not match if users do not have a set rate | closed | | 17.2.0 | | Modules and project features / Project overview, Modules and project features / Costs and budgets, Frontend components and Primer design system | | DREAM-634 | Bug | Refine widget blankslate text and position | closed | | 17.2.0 | | Modules and project features / Project overview, Frontend components and Primer design system | | DREAM-632 | Bug | 'Actual costs per months' widget does not show previous 12 months | closed | | 17.2.0 | | Modules and project features / Project overview, Modules and project features / Costs and budgets, Frontend components and Primer design system | | DREAM-629 | Bug | Widget does not render with new currency format | closed | | 17.2.0 | | Modules and project features / Costs and budgets, Modules and project features / Project overview | ## 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 | | ## Details | Attribute | Value | | --- | --- | | Pull preview | https://pr-20966-66124-overview-ip-3-76-100-130.my.preview.run/ | | Mockups | https://www.figma.com/design/kjzHe0qOLme1LXCjLoTBFV/Overview-and-Dashboard?node-id=585-21108 | | Accessibility | No | ## People | Attribute | Value | | --- | --- | | Assignee | | | Accountable | | | Product manager | | | Developers | Alexander Coles | | 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 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** **Preconditions** * There are multiple new widgets for the Budgets module shown on the Overview page only * Widgets shown only if Budgets and the Time&Costs module is activated in the project. * Widget shown only if necessary permissions are granted, see [https://community.openproject.org/documents/180](https://community.openproject.org/documents/180) for a detailed matrix **Widgets** * 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 (€) * 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
* A new widget called "**Total Budget by cost type**" which shows a pie chart with all cost types currently in use * Labour 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). * 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 * Technical note: These are `MaterialBudgetItem` and `LaborBudgetItem`
pie chart for Budget by cost type
* 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. * Widget shows 12 full calendar months, ending with the current month * 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 type (unless it is 0). * 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 * Technical note: These are `CostEntry` and `TimeEntry` which share a common interface
**Data** * 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 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 X budgets included in the %{workspace} and its subitems") **Blankslates** * When no budgets are currently available, the "Budget by cost type" shows a Blankslate with * icon: "op-budget" * header: "Start project controlling" * Description: "Get an overview of your budgets and costs to efficiently track the health status of your project" * (Secondary) Button: "+ Budget" (will lead to the budget creation page) * When there is a budget but the planned costs are empty, the "Budget by cost type" shows a different blankslate: * icon: "graph" * header: "No budget data" * Description: "Add planned unit and labor costs to this project to start tracking the budget" * No button * When no logged times are currently available, the "Actual costs by month" widgets shows a Blankslate with * icon: "op-cost-reports" * header: "Start tracking your time and costs" * Description: "Get an overview of your costs and logged time to monitor progress of your project" * (Secondary) Button: "Log time" (will open the log time dialog) * When there are unit costs but the widget should still be empty, the "Actual costs" shows a different blankslate. This happens for example when the unit costs where booked over a year ago, or the rate was 0. * icon: "graph" * header: "No data for current year" * Description: "Log spent time and costs for work packages to start tracking actual costs" * No button
## **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 ## Hints for QA In order to render anything at all, budgets and charts need to be enabled and the user must have a number of permissions (in addition to the rights to view the project overview itself). In order to render charts that show meaningful data, a large amount of example data is needed. [https://community.openproject.org/documents/180](https://community.openproject.org/documents/180) lists what is needed in terms of prerequisites.