**As** a board member
**I want to** have a clear and understandable overview of portfolios, programs, and projects while I'm travelling
**so that** I can prepare myself for my revision meeting with the portfolios managers 

## **Acceptance criteria**

#### Portfolios:

* [ ] The header of the portfolio should contain the Name, a label with icon indicating that it is a portfolio and the status.
* [ ] The `Overview` tab should contain the following information in order:
* [ ] Portfolio description, if filled. This is the only not collapsible information.
* [ ] Budget graph using the [FL Chart Pie Chart Sample 2.](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/pie/pie_chart_sample2.dart)
* [ ] This will use the data from budgets allocation (unspent, spent and available) when available from the web app. Begin of the deletion For now, we will use fake data to implement the graphs.
* [ ] Risk graph using the [FL Line Chart Samaple 1](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/line/line_chart_sample1.dart).
* [ ]End of the deletion This Begin of the insertionis not yetEnd of the insertion Begin of the deletion will use the data about risks by levels (low, medium, and high) during the last months, whenEnd of the deletion available Begin of the deletion from the web app. For now, we will use fake data to implement the graphs.
* [ ] Goals graph using the [FL Chart Bar Chart Sample 1 (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart)End of the deletion in Begin of the deletion a horizontal display forEnd of the deletion the Begin of the insertionAPI,End of the insertion Begin of the deletion total progress of the goals. And the [FL Chart Bar Chart Sample 3](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample3.dart)End of the deletion for Begin of the insertionnow pleaseEnd of the insertion Begin of the deletion the data about goals by status (on track, at risk, off track and closed).
* [ ] This willEnd of the deletion use Begin of the deletion the data about goals progress and status when available from the web app. For now, we will useEnd of the deletion fake Begin of the insertiondata.End of the insertion Begin of the deletion data to implement the graphs.End of the deletion
* [ ] Any other information (portfolio attributes) organised by sections/groups.
* [ ] All cards on the overview page will come expanded by default.
* [ ] The `In this portfolio` tab should contain all the programs and projects on the first level below the portfolio listed using the implementation of portfolios index pages.
* [ ] Note: for now, the current implementation is not accepting sub-portfolios.

#### Programs:

* [ ] The header of the portfolio should contain the Name, a label with icon indicating that it is a program and the status.
* [ ] The `Overview` tab should contain the following information in order:
* [ ] Program description, if filled. This is the only not collapsible information.
* [ ] A program hierarchy that should contain the information of any existing parent program or portfolio.
* [ ] Project by status using the [FL Chart Bar Chart Sample Begin of the insertion3](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample3.dart).End of the insertion Begin of the deletion 3](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample3.dart). End of the deletion
* [ ] This will use already collected data about subprojects by status (On track, at risk, off track, not started, finished).
* [ ] Any other information (program attributes) organised by sections/groups.
* [ ] The `In this program` tab should contain all the programs and projects on the first level below the program listed using the implementation of project index pages.

#### Projects:

* [ ] The header of the project should contain the Name, a label with icon indicating that it is a project and the status.
* [ ] The `Overview` tab should contain the following information in order:
* [ ] Program description, if filled. This is the only not collapsible information.
* [ ] A program hierarchy that should contain the information of any existing parent program or portfolio.
* [ ] A status description if filled.
* [ ] Work packages status by type (the 5 more used types) using the [FL Chart Bar Chart Sample Begin of the insertion5](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample5.dart).End of the insertion Begin of the deletion 5](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample5.dart). End of the deletion
* [ ] This will use already collected data about all the work packages by type and divide by status open or closed.
* [ ] Any other information (project attributes) organised by sections/groups.
* [ ] The `Work packages` tab should contain all the work packages below the project listed using the implementation of work packages lists without the project selection or query selection.
* [ ] We add the option to mark portfolios, programs, and projects as favourite from the detail pages.

### General:

* [ ] Any of the previous graphs must be hidden if there is no data for it (no budget, risks, sub-projects…)
* [ ] Follow the designs to see the expected behaviour on tap and what information to display for each graph.

## **Technical notes**

* We will use the library FL Chart as a base for the graphs/charts (https://flchart.dev/).


## **Permissions and visibility considerations**

* Need to read which permissions do the user have to see Portfolios, and Programs.


## Visual reference

<img class="op-uc-image op-uc-image_inline" src="/api/v3/attachments/777096/content">

## **Out of scope**

* The `Goals` tab should contain all the goals from the portfolio listed. We are waiting until the development of the web app for this.

* The `Risks` tab should contain all the risks from the portfolio listed. We are waiting until the development of the web app for this. Begin of the insertion

* Risk graph using the [FL Line Chart Samaple 1](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/line/line_chart_sample1.dart).

* This will use the data about risks by levels (low, medium, and high) during the last months, when available from the web app. For now, we will use fake data to implement the graphs.

* Goals graph using the [FL Chart Bar Chart Sample 1 (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart) in a horizontal display for the total progress of the goals. And the [FL Chart Bar Chart Sample 3](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample3.dart) for the data about goals by status (on track, at risk, off track and closed).

* This will use the data about goals progress and status when available from the web app. For now, we will use fake data to implement the graphs.End of the insertion