# sharsha2/spendwise architecture

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

- Interactive diagram: https://gitdiagram.com/sharsha2/spendwise
- Repository: https://github.com/sharsha2/spendwise

## Overview

Moneta is a browser-based personal expense and budget tracker. The user enters transactions or imports an Excel workbook, then filters and reviews the transaction table and spending summaries; they can also configure categories, people, banks, budgets, recurring transactions, and display settings, and export workbook data. The application logic is concentrated in app.js, with index.html providing the interface. The README is empty and the source excerpt is partial, so links for capabilities visible only in the excerpt are omitted where their wiring cannot be established.

Main entry points: [`app.js`](https://github.com/sharsha2/spendwise/blob/main/app.js) (Application logic), [`index.html`](https://github.com/sharsha2/spendwise/blob/main/index.html) (Application page), [`styles.css`](https://github.com/sharsha2/spendwise/blob/main/styles.css) (Interface styles)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["Browser interface"]
  node_page["Application page<br/>[index.html]"]
  node_styles["Interface styles<br/>[styles.css]"]
end

subgraph group_transactions["Transaction management"]
  node_app["Application logic<br/>[app.js]"]
  node_transaction_entry["Transaction entry<br/>[app.js]"]
  node_excel_io["Excel import/export<br/>[app.js]"]
  node_table["Transaction table<br/>[app.js]"]
  node_categories["Category matching<br/>[app.js]"]
end

subgraph group_insights["Settings and insights"]
  node_settings["Settings and budgets<br/>[app.js]"]
  node_recurring["Recurring transactions<br/>[app.js]"]
  node_charts["Spending charts<br/>[app.js]"]
end

node_user(("User"))
node_local_storage[("Browser local storage")]
node_xlsx["XLSX library"]
node_chart_library["Chart library"]

node_user -->|"uses"| node_page
node_page -->|"dispatches events"| node_app
node_app -->|"updates interface"| node_page
node_app -->|"handles entry"| node_transaction_entry
node_app -->|"handles import/export"| node_excel_io
node_app -->|"filters and renders"| node_table
node_app -->|"categorizes stores"| node_categories
node_app -->|"manages settings"| node_settings
node_app -->|"applies recurring"| node_recurring
node_app -->|"builds summaries"| node_charts
node_app -->|"reads/writes settings"| node_local_storage
node_excel_io -->|"uses"| node_xlsx
node_charts -->|"renders charts"| node_chart_library
node_page -->|"loads"| node_styles

click node_page "https://github.com/sharsha2/spendwise/blob/main/index.html"
click node_styles "https://github.com/sharsha2/spendwise/blob/main/styles.css"
click node_app "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_transaction_entry "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_excel_io "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_table "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_categories "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_settings "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_recurring "https://github.com/sharsha2/spendwise/blob/main/app.js"
click node_charts "https://github.com/sharsha2/spendwise/blob/main/app.js"

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_page,node_styles,node_user toneBlue
class node_app,node_transaction_entry,node_excel_io,node_table,node_categories,node_local_storage toneAmber
class node_settings,node_recurring,node_charts toneMint
class node_xlsx,node_chart_library toneIndigo
```

## Components

### Browser interface

- [Application page](https://github.com/sharsha2/spendwise/blob/main/index.html): `index.html`
- [Interface styles](https://github.com/sharsha2/spendwise/blob/main/styles.css): `styles.css`

### Transaction management

- [Application logic](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Transaction entry](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Excel import/export](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Transaction table](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Category matching](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`

### Settings and insights

- [Settings and budgets](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Recurring transactions](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`
- [Spending charts](https://github.com/sharsha2/spendwise/blob/main/app.js): `app.js`

### Other components

- **User**
- **Browser local storage**
- **XLSX library**
- **Chart library**

## Connections

- User → Application page: uses
- Application page → Application logic: dispatches events
- Application logic → Application page: updates interface
- Application logic → Transaction entry: handles entry
- Application logic → Excel import/export: handles import/export
- Application logic → Transaction table: filters and renders
- Application logic → Category matching: categorizes stores
- Application logic → Settings and budgets: manages settings
- Application logic → Recurring transactions: applies recurring
- Application logic → Spending charts: builds summaries
- Application logic → Browser local storage: reads/writes settings
- Excel import/export → XLSX library: uses
- Spending charts → Chart library: renders charts
- Application page → Interface styles: loads