**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).
* [ ] Risk graph using the [FL Begin of the insertionLineEnd of the insertion Chart Begin of the insertionSamaple 1](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/line/line_chart_sample1.dart).End of the insertion Begin of the deletion 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 This will use the data about risks by levels (low, medium, and Begin of the insertionhigh) during the last months.End of the insertion Begin of the deletion high).End of the deletion
* [ ] Goals graph using the [FL Chart Bar Chart Sample 1 Begin of the insertion(Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart) in a horizontal display forEnd of the insertion Begin of the deletion (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart). This will useEnd of the deletion the Begin of the insertiontotal 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 theEnd of the insertion data about goals Begin of the deletion and its progressEnd of the deletion by status Begin of the insertion(onEnd of the insertion Begin of the deletion (Total, onEnd of the deletion track, at risk, off track and closed).
* [ ] Any other information (portfolio attributes) organised by sections/groups.
* [ ] The `Goals` tab should contain all the goals from the portfolio listed.
* [ ] The tab should have a search bar.
* [ ] Also, a sorting by status, ID or alphabetic order.
* [ ] The `Risks` tab should contain all the risks from the portfolio listed.
* [ ] The tab should have a search bar.
* [ ] Also, a sorting by risk level, ID or alphabetic order.
* [ ] The `Sub-portfolios` tab should contain all the sub-portfolios below the portfolio listed using the implementation of portfolios index pages.
* [ ] The `Programs` tab should contain all the programs below the portfolio, listed using the implementation of programs index pages.

#### 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 3](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample3.dart). This will use the data about subprojects by status (On track, at risk, off track, not started, finished).
* [ ] Any other information (program attributes) organised by sections/groups.
* [ ] The `Projects` tab should contain all the projects 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 5](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample5.dart). This will use the 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.

### 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="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774409/content">

## **Out of scope**

* ##