**As a** project manager
**I want to** understand the relations constraints when setting dates or switching scheduling mode
**So that** I feel in control and avoid switching to Gantt view to understand relations.

#### Acceptance criteria

##### **Date Begin of the insertionpicker:**End of the insertion Begin of the deletion picker: Predecessor, Successor and Children tabs**End of the deletion

* Begin of the deletion There is now an _UnderlineNav_ bar at the top:

* With three options:

* Dates

* Predecessors

* Successors

* Children

* Each of the tabs displays the number of relations of  that type with a badge

* End of the deletion In Begin of the deletion each tab, all relations of that type are displayed in a box list

* The content isEnd of the deletion the Begin of the deletion same as in the "Relations" tab of the work package, but without the section header

* In theEnd of the deletion "Predecessors" tab, when there are multiple predecessors, the one setting the date of the current work package has a label that says "Closest" next to the date and lag information

* When two predecessors or more have the same end date, by convention the oldest one is chosen as the closest (_created\_at_ field). Begin of the deletion

* If there are no predecessors and automatic scheduling mode is selected in the date picker:

* a blankslate with a primary action to add a predecessor will be displayed (permissions allowing)End of the deletion


#### Visuals

_**Note:** Please check_ [_Figma_](https://www.figma.com/design/HrWVktq0SsGI2dqqIKQ11M/Scheduling---Lag-and-Modes?node-id=175-3641) _for the most recent mockups._

**Date picker Predecessors tab:**

<img class="image_resized op-uc-image op-uc-image_inline" style="width:540px;" src="/api/v3/attachments/226781/content">