Turn Server Data into a Working Interface

In Module 2, you traced the path from db.json to the Ledger. In this module, you will implement and refine the client side of that path.

We will work in this order:

1. Give every client request one shared fetch implementation and one error format.
2. Load transactions and categories when BudgetProvider starts.
3. Show the user what is happening while data loads, and what to do when the server is unavailable.
4. Replace component-level total arithmetic with a reusable financial calculation.
5. Build category bars from each category’s actual share of total expenses.

What you will have at the end

The client will have a clear read lifecycle:

start app
   ↓
request transactions + categories
   ↓
store the response in context
   ↓
render the selected month
   ↓
calculate derived values
   ↓
show readable loading/error states when needed

The interface and sample data are already prepared. Your job is to make the existing pieces use the same data flow consistently.

What we are not doing yet

We are not creating or editing transactions in this module. Those are write operations and belong to the Transactions module after the read side is working.

Checkpoint

You can explain the difference between raw application data (transactions, categories) and derived UI values such as a monthly expense total or category percentage.