Reusable component for charts in in progress report and PDF preview

[myix765]

PR for ticket #52

1. Created a reusable component that lists the charts added to the in progress report instead of using hard-coded data, used for displaying on the Reports page
2. Styled the PDF preview page to allow the user to preview how the report will look

Some issues/things to note with the preview page:

• The page goes through a couple rerenders before the page is finally loaded
• The chart data is not kept (not sure if this was fixed in a different PR)
• The charts are kind of small right now because the svgs don't take up the full width, possibly from the max-w-900px. We tried removing them to see how they looked and it seemed to work, except for the line chart where the svg took up the full width but the ... within the svg didn't . We decided to not mess around with it in case it breaks the charts elsewhere.
• Related but when we tried to make the width smaller on the charts so that they could be taller, but the line chart would get cut off instead of the width shrinking like the other charts, so we didn't do that.

Installed packages:

• react-pdf/renderer: used to create the PDF preview

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bhg	Ready	Preview, Comment	Feb 3, 2026 6:59am