# xbl2602/budget-app architecture

> Architecture diagram of the GitHub repository xbl2602/budget-app, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/xbl2602/budget-app
- Repository: https://github.com/xbl2602/budget-app

## Overview

Budget App is an offline, browser-based personal finance tracker. Users enter and manage records, categories, budgets, split bills, and purchase plans; the app persists that data locally and renders summaries, reports, statistics, and projections. Settings support data import/export and optional LAN sync, while a separate lightweight mobile HTML app provides quick record and category management. The graph combines README-documented capabilities with sampled source; unsampled features are included only at their documented subsystem level, and uncertain internal wiring is omitted.

Main entry points: [`src/js/06-router.js`](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/06-router.js) (Page router), [`src/js/02-datastore.js`](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/02-datastore.js) (Data store), [`src/js/04-stats-engine.js`](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/04-stats-engine.js) (Stats engine), [`src/js/18-render-settings.js`](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/18-render-settings.js) (Settings and import)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["App shell"]
  node_router["Page router<br/>[06-router.js]"]
  node_startup["App startup<br/>[22-init.js]"]
  node_overview["Overview"]
end

subgraph group_ledger["Ledger and plans"]
  node_entry["Record entry<br/>[14-render-add.js]"]
  node_records["Records"]
  node_categories["Categories"]
  node_split["Split bills<br/>[26-split-bills.js]"]
  node_plans["Purchase plans"]
end

subgraph group_insights["Analysis and reports"]
  node_statsengine["Stats engine<br/>[04-stats-engine.js]"]
  node_statsui["Statistics<br/>[17-stats-charts.js]"]
  node_simulation["What-if engine"]
  node_whatifui["What-if page<br/>[20-what-if.js]"]
  node_report["Monthly report"]
end

subgraph group_data["Persistence and exchange"]
  node_store["Data store<br/>[02-datastore.js]"]
  node_storage[("Browser localStorage")]
  node_settings["Settings and import"]
  node_excel["Excel export<br/>[03-excel-export.js]"]
  node_sync["LAN sync<br/>[23-lan-sync.js]"]
end

node_person(("User"))
node_mobile["Mobile companion"]

node_person -->|"selects page"| node_router
node_startup -->|"starts navigation"| node_router
node_router -->|"renders page"| node_overview
node_router -->|"renders page"| node_entry
node_router -->|"renders page"| node_records
node_router -->|"renders page"| node_categories
node_router -->|"renders page"| node_statsui
node_router -->|"renders page"| node_report
node_router -->|"renders page"| node_whatifui
node_router -->|"renders page"| node_settings
node_entry -->|"saves records"| node_store
node_records -->|"reads and edits"| node_store
node_categories -->|"manages categories"| node_store
node_split -->|"manages bills"| node_store
node_plans -->|"manages plans"| node_store
node_overview -->|"gets summaries"| node_statsengine
node_statsui -->|"gets chart data"| node_statsengine
node_whatifui -->|"runs projections"| node_simulation
node_simulation -->|"uses spending data"| node_statsengine
node_report -->|"gets report data"| node_statsengine
node_store -->|"reads and writes"| node_storage
node_settings -->|"imports and exports"| node_store
node_settings -->|"requests workbook"| node_excel
node_excel -->|"reads ledger data"| node_store
node_sync -.->|"exchanges data"| node_store
node_person -->|"records on phone"| node_mobile
node_mobile -->|"stores locally"| node_storage

click node_router "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/06-router.js"
click node_startup "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/22-init.js"
click node_overview "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/10-render-overview.js"
click node_entry "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/14-render-add.js"
click node_records "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/15-render-records.js"
click node_categories "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/16-render-categories.js"
click node_split "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/26-split-bills.js"
click node_plans "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/27-purchase-plans.js"
click node_statsengine "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/04-stats-engine.js"
click node_statsui "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/17-stats-charts.js"
click node_simulation "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/05-simulation-engine.js"
click node_whatifui "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/20-what-if.js"
click node_report "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/19-render-report.js"
click node_store "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/02-datastore.js"
click node_settings "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/18-render-settings.js"
click node_excel "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/03-excel-export.js"
click node_sync "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/23-lan-sync.js"
click node_mobile "https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/money-wise-mobile.html"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_router,node_startup,node_overview,node_person toneBlue
class node_entry,node_records,node_categories,node_split,node_plans toneAmber
class node_statsengine,node_statsui,node_simulation,node_whatifui,node_report toneMint
class node_store,node_storage,node_settings,node_excel,node_sync toneRose
class node_mobile toneTeal
```

## Components

### App shell

- [Page router](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/06-router.js): `src/js/06-router.js`
- [App startup](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/22-init.js): `src/js/22-init.js`
- [Overview](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/10-render-overview.js): `src/js/10-render-overview.js`

### Ledger and plans

- [Record entry](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/14-render-add.js): `src/js/14-render-add.js`
- [Records](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/15-render-records.js): `src/js/15-render-records.js`
- [Categories](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/16-render-categories.js): `src/js/16-render-categories.js`
- [Split bills](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/26-split-bills.js): `src/js/26-split-bills.js`
- [Purchase plans](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/27-purchase-plans.js): `src/js/27-purchase-plans.js`

### Analysis and reports

- [Stats engine](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/04-stats-engine.js): `src/js/04-stats-engine.js`
- [Statistics](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/17-stats-charts.js): `src/js/17-stats-charts.js`
- [What-if engine](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/05-simulation-engine.js): `src/js/05-simulation-engine.js`
- [What-if page](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/20-what-if.js): `src/js/20-what-if.js`
- [Monthly report](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/19-render-report.js): `src/js/19-render-report.js`

### Persistence and exchange

- [Data store](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/02-datastore.js): `src/js/02-datastore.js`
- **Browser localStorage**
- [Settings and import](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/18-render-settings.js): `src/js/18-render-settings.js`
- [Excel export](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/03-excel-export.js): `src/js/03-excel-export.js`
- [LAN sync](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/src/js/23-lan-sync.js): `src/js/23-lan-sync.js`

### Other components

- **User**
- [Mobile companion](https://github.com/xbl2602/budget-app/blob/RECONSTRUCT/money-wise-mobile.html): `money-wise-mobile.html`

## Connections

- User → Page router: selects page
- App startup → Page router: starts navigation
- Page router → Overview: renders page
- Page router → Record entry: renders page
- Page router → Records: renders page
- Page router → Categories: renders page
- Page router → Statistics: renders page
- Page router → Monthly report: renders page
- Page router → What-if page: renders page
- Page router → Settings and import: renders page
- Record entry → Data store: saves records
- Records → Data store: reads and edits
- Categories → Data store: manages categories
- Split bills → Data store: manages bills
- Purchase plans → Data store: manages plans
- Overview → Stats engine: gets summaries
- Statistics → Stats engine: gets chart data
- What-if page → What-if engine: runs projections
- What-if engine → Stats engine: uses spending data
- Monthly report → Stats engine: gets report data
- Data store → Browser localStorage: reads and writes
- Settings and import → Data store: imports and exports
- Settings and import → Excel export: requests workbook
- Excel export → Data store: reads ledger data
- LAN sync → Data store: exchanges data
- User → Mobile companion: records on phone
- Mobile companion → Browser localStorage: stores locally