CodingNic

Categories and Summary

Build the Summary Page

Categories and Summary 20 min read

Build the Summary Page

Open client/src/pages/SummaryPage.jsx.

Calculate the page values from reusable functions rather than embedding arithmetic throughout the JSX.

Useful derived values include total income, total expenses, balance, savings rate, average monthly expense, and the highest-spending category.

Test it

Use the seeded September data and compare the values to the Ledger strip. Then add another transaction and verify both pages update.

Checkpoint

The Summary page is a view over the same source data, not a second data store.