View a CAN's Budget and Spending Info

[jonnalley]

User Story

As an OPS user, I want to understand the spending activity and defined budget for a given CAN so that I can continue to manage the funds in the CAN optimally.

Preconditions

• There is a dataset loaded of CANs linked to projects, and with pre-existing agreements with budget lines

Acceptance Criteria

• For a given CAN and for the current fiscal year by default, user can discern a visual summary of spent funds for the CAN compared with the unspent portion of funds in the CAN.
• For a given CAN and for the current fiscal year by default, the user can discern the number of associated projects, agreements, and budget lines. The BLs should be broken down by BL status.
• For a given CAN and for the current fiscal year by default, the user can discern a summary the total funds for all budget lines associated to this CAN broken down by BL status along with that status's ratio to the total of all budget lines
• The user can select from a list of other fiscal years to update the summary information mentioned above that is rendered
• The user can see a paginated matrix of all budget lines associated to this CAN showing the BL's ID, agreement name, Obligate By date, fiscal year (FY), total dollar amount, percentage of the CAN's funds, and the status of that BL.
• The user can optionally access more details about that BL.

---

Tasks

UX

UX work was covered in #2542

Dev

• add Cards (components should be built) #3046
• add Table for CAN Budget Lines #3030
• add TableRow for CAN Budget Lines (expandable) #3031
• add pagination #3053
• add SimpleAgreement data to BudgetLine #3052
  • Agreement Name
  • Agreement Procurement Shop Code
  • Agreement Type
• add DRAFT budget lines to /can-funding-summary response #3070

Definition of Done Checklist

• UI works as designed (UX team)
• PR(s) have been merged to main
• Design/tech debt eliminated
• [-] New design/tech debt documented (if applicable)
• [-] Build process updated
• [-] Documentation updated or added
• [-] Feature flags/toggles created

Additional Context & Resources

• https://www.figma.com/design/dsQFe6G2KjcTWNq7NNZujm/OPRE-OPS?node-id=12012-119868&t=Wh3VGLVZR9M0PpPx-4