Redesign the CIP planner page

[xmedr]

The current design for the page could use a touch up. Some potential adjustments are:

• more horizontal space for the phases table
• moving the dropdowns at the top right closer to what they interact with
• moving the sidebar tables to the top of the page

[xmedr]

Here's a super rough draft of what those changes could look like.

The name of the current portfolio could move right underneath the header, and the 'select a portfolio' dropdown could come right next to it. Because of the empty space to the right this change creates, the new portfolio button could be changed and moved to that space.

The cost boxes in the right sidebar could be moved to the top of the table allowing for the phases table to span the full width of the window. However, because the boxes in that sidebar tend to show data vertically, this could push the table down further than it needs to be. We could:

• put them in a collapsable box that you could expand to see the full details (shown below)
• limit the amount of years the boxes show to 5, and let them all be displayed at the top
• or keep it the way it is, where it displays to the right on larger screen sizes, and underneath the table on smaller

The 'filter by section' dropdown could move into the phases table and that would allow for more filters to be placed in that same space.

What do you think @jim-z? If you've got any other ideas or want to change anything in this example please lmk!

[smcalilly]

• related to #257

[smcalilly]

@jim-z what about this? it has all of the filters for #257 and the table headers with the change we made in PR #270. we're still not sure a good place to put the budget overview boxes — it's not as important as the other elements so it might need to be less prominent.

whatever y'all decide, we need to figure out where to put the filters to finish #257