Organize the Ledger and Turn Data into Insight

The transaction workflow is now interactive. This module adds the two pieces that make the ledger easier to understand over time: a shared category list for expenses and summary views derived from the same transaction data.

We will work through the module in this order:

1. Read categories from the server and render their existing metadata.
2. Add a category and handle duplicate names consistently.
3. Delete unused categories through the reusable custom confirmation dialog, while keeping the server’s dependency rule in charge.
4. Stop pretending that income is an expense category by storing category: null for income.
5. Make category percentages represent a real share of total spending rather than comparing everything with the largest category.
6. Build the all-time Summary page from reusable calculations.
7. Explain the average-monthly-spend rule and make zero-expense represented months count.
8. Build the monthly income-vs-expense trend from grouped transaction data.

What you should expect from the module

The Categories page will let the learner add categories and clearly explain why an in-use category cannot be removed. The Ledger’s category bars will have a meaningful percentage interpretation. The Summary page will report totals, balance, savings rate, average monthly spending, top category, and monthly trends using the same transactions already loaded into context.

The important architectural idea is reuse: categories come from the API, transactions come from the API, and every summary number is derived from those collections. Nothing on the Summary page becomes a second database.

Checkpoint

Before continuing, look at the existing CategoriesPage.jsx and SummaryPage.jsx. Both already have prepared UI. In this module you are connecting those views to clearer data rules rather than redesigning their layout.