[Feature] Updates to Proposed Budget and Executive Summary

[thetif]

Description and related issues

Base on design ticket #3380

1. Add help text explaining the table content and calculations, when needed.

This only applies to the Summary Budget Table, at the moment. We need to better explain how the #s are generated and from what part of the builder are they coming from.

2. Add alternating rows to large data sets

To improve scanability, I think we need alternating rows for tables with 5 or more
rows. It will help users follow the content across a row better. It is however not beneficial for smaller datasets because there is less of an issue with scanning and alternating rows, may give off the impression that we are highlighting some information and not others. From a dev perspective, we need a way to conditionally add alt rows if rows are greater
than 4 Even numbers would have the #F1F1F1 background color.

3. Highlight totals

We are already doing this but we can also highlight subtotals but we can highlight subtotal columns to enhance scanability. Grand totals or total medicaid computable would have a dark yellow (#FAD980). Subtotals will be a lighter yellow (#FDF9EB) This applies to:

• Other Funding amount : Activity total cost table
• Proposed Budget: Combined Activity Cost table
• Proposed Budget: State and Contractor Cost breakdown table
• Proposed Budget: Summary Budget Table
• Budget and FFP table
• Executive Summary Table

4. Make the tables more visually consistent

Most table headers have the gray background and the black text with the exception of proposed budget table, activity schedule summary tables so we should change those to maintain consistency.Another reason for the change is that it looks closer to the CMS design system and it is less jarring color contrast

Mockups or link to Figma

https://www.figma.com/file/hJpKHKU6fz5J0Z7fisSwa2/eAPD-MMIS-2022?node-id=2779:17295&t=XPkclhsJgd2SnnqZ-0

Acceptance criteria

• change the help text below the Summary Budget Table

The following tables summarize the calculated Medicaid Total Computable (Total Activity Cost minus any Other Funding amounts) for key state personnel, state personnel, private contractor, and other state expenses for all activities by FFY. The tables provide subtotals for each of these categories by program area with the calculated Federal share by FFP rate and the associated state share. The final table in this section provides the total Medicaid cost for all activities in this APD
by FFY.

• update tables to display rows with alternating white and gray (#F1F1F1) rows if the table has more than 4 rows (count includes subtotal/total row). Even numbered rows should be gray

• Activity Total Costs changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• Budget and FFP table changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• Executive Summary Table changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• Combined Activity Costs changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• Summary Budget Table changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• State and Contractor Cost Breakdown changes

  • Grand totals or total medicaid computable would have a dark yellow (#FAD980)
  • Subtotals will be a lighter yellow (#FDF9EB)

• Make tables more consistent

if a table has a single header it should be medium gray (#D9D9D9), if a table has two headers the first header should be dark gray (#404040) and the second header should be medium gray (#D9D9D9)

• change Activity Schedule Summary table so that the header is the medium gray (#D9D9D9) with black text
  
• change Program Budget Tables so that the first header is (#404040) and the second header stays (#D9D9D9)
• Add lighter yellow to total computable column (#FDF9EB)
  

Testing criteria

Given	When	Then	Covered
a HITECH or MMIS APD	On the Proposed Budget page, Executive Summary page, Budget and FFP page, and the Activity Schedule Summary page	All changes to tables should only affect the Activity total cost table, Combined Activity Cost table, State and Contractor Cost breakdown table, Summary Budget Table, Budget and FFP table, Executive Summary Table, Schedule Summary by Activity, and Milestone Tables by Activity	(Add checkmark here when covered)
a HITECH or MMIS APD	On the Proposed Budget page, Executive Summary page, Budget and FFP page, and the Activity Schedule Summary page	If a table has more than 4 rows, each row should alternate in color. Even numbered rows should be gray (#F1F1F1)
a HITECH or MMIS APD	Tables on the Proposed Budget page and Budget and FFP page	Subtotal rows should have a light yellow background color and Grand total rows should have a dark yellow background color
a HITECH or MMIS APD	Tables on the Executive Summary page	Total row should be light yellow. This is an exception to the totals/subtotals color scheme. (Verified w/ Akua)
a HITECH or MMIS APD	On the Proposed Budget page	Help text for the Summary Budget table section should be updated
a HITECH or MMIS APD	Tables on the Activity Schedule Summary; Combined Activity Costs and State and Contractor Cost Breakdown tables on the Proposed budget	The table header background color should change from black to gray to match the other tables
a HITECH or MMIS APD	Summary Budget Tables on the Proposed Budget	Federal total should come first before State total
a HITECH or MMIS APD	Milestone Tables by Activity on the Activity Schedule Summary page	Table header should be changed to the activity name. Subheaders should be Milestone List and Target completion date