# rhesal/finpraja architecture

> Architecture diagram of the GitHub repository rhesal/finpraja, 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/rhesal/finpraja
- Repository: https://github.com/rhesal/finpraja

## Overview

FinPraja is a Vue personal-finance app for recording income and expenses, reviewing balances and budgets, exploring reports, and managing financial data. Its main workflow is user entry (including receipt OCR) → transaction storage → dashboard, transaction-list, and report views; settings support budget management and backup/restore. The README is only a starter-template description, and some views and settings code were not sampled, so uncertain data wiring is omitted.

Main entry points: [`src/router/index.js`](https://github.com/rhesal/finpraja/blob/main/src/router/index.js) (View router), [`src/App.vue`](https://github.com/rhesal/finpraja/blob/main/src/App.vue) (App shell), [`src/components/AddTransactionModal.vue`](https://github.com/rhesal/finpraja/blob/main/src/components/AddTransactionModal.vue) (Transaction entry), [`src/db.js`](https://github.com/rhesal/finpraja/blob/main/src/db.js) (Finance database)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["App shell"]
  node_entry["App bootstrap<br/>[main.js]"]
  node_shell["App shell<br/>[App.vue]"]
  node_navigation["Navigation<br/>[BottomNav.vue]"]
  node_routes["View router<br/>[index.js]"]
end

subgraph group_finance["Finance workflows"]
  node_transactions["Transaction list"]
  node_settings["Settings &amp; backup<br/>[SettingsView.vue]"]
  node_modal["Transaction entry"]
  node_ocr["Receipt OCR"]
end

subgraph group_insights["Insights"]
  node_home["Dashboard<br/>[HomeView.vue]"]
  node_reports["Reports<br/>[ReportsView.vue]"]
end

subgraph group_data["Local data"]
  node_livequery["Reactive queries<br/>[useLiveQuery.js]"]
  node_database[("Finance database<br/>[db.js]")]
end

node_user(("User"))
node_chartjs["Chart.js"]
node_tesseract["Tesseract.js"]

node_user -->|"opens app"| node_shell
node_entry -->|"mounts"| node_shell
node_entry -->|"installs"| node_routes
node_shell -->|"initializes"| node_database
node_shell -->|"renders views"| node_routes
node_user -->|"selects view"| node_navigation
node_navigation -->|"navigates"| node_routes
node_navigation -->|"opens entry"| node_shell
node_routes -->|"dispatches"| node_home
node_routes -->|"dispatches"| node_transactions
node_routes -->|"dispatches"| node_reports
node_routes -->|"dispatches"| node_settings
node_shell -->|"shows"| node_modal
node_user -->|"enters transaction"| node_modal
node_modal -->|"writes transaction"| node_database
node_modal -->|"processes receipt"| node_ocr
node_ocr -.->|"recognizes text"| node_tesseract
node_home -->|"subscribes to data"| node_livequery
node_livequery -->|"queries"| node_database
node_reports -->|"uses reactive queries"| node_livequery
node_reports -->|"renders charts"| node_chartjs
node_settings -->|"manages budgets and data"| node_database

click node_entry "https://github.com/rhesal/finpraja/blob/main/src/main.js"
click node_shell "https://github.com/rhesal/finpraja/blob/main/src/App.vue"
click node_navigation "https://github.com/rhesal/finpraja/blob/main/src/components/BottomNav.vue"
click node_routes "https://github.com/rhesal/finpraja/blob/main/src/router/index.js"
click node_home "https://github.com/rhesal/finpraja/blob/main/src/views/HomeView.vue"
click node_transactions "https://github.com/rhesal/finpraja/blob/main/src/views/TransactionsView.vue"
click node_reports "https://github.com/rhesal/finpraja/blob/main/src/views/ReportsView.vue"
click node_settings "https://github.com/rhesal/finpraja/blob/main/src/views/SettingsView.vue"
click node_modal "https://github.com/rhesal/finpraja/blob/main/src/components/AddTransactionModal.vue"
click node_ocr "https://github.com/rhesal/finpraja/blob/main/src/components/AddTransactionModal.vue"
click node_livequery "https://github.com/rhesal/finpraja/blob/main/src/composables/useLiveQuery.js"
click node_database "https://github.com/rhesal/finpraja/blob/main/src/db.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_entry,node_shell,node_navigation,node_routes,node_user toneBlue
class node_transactions,node_settings,node_modal,node_ocr toneAmber
class node_home,node_reports toneMint
class node_livequery,node_database toneRose
class node_chartjs,node_tesseract toneIndigo
```

## Components

### App shell

- [App bootstrap](https://github.com/rhesal/finpraja/blob/main/src/main.js): `src/main.js`
- [App shell](https://github.com/rhesal/finpraja/blob/main/src/App.vue): `src/App.vue`
- [Navigation](https://github.com/rhesal/finpraja/blob/main/src/components/BottomNav.vue): `src/components/BottomNav.vue`
- [View router](https://github.com/rhesal/finpraja/blob/main/src/router/index.js): `src/router/index.js`

### Finance workflows

- [Transaction list](https://github.com/rhesal/finpraja/blob/main/src/views/TransactionsView.vue): `src/views/TransactionsView.vue`
- [Settings & backup](https://github.com/rhesal/finpraja/blob/main/src/views/SettingsView.vue): `src/views/SettingsView.vue`
- [Transaction entry](https://github.com/rhesal/finpraja/blob/main/src/components/AddTransactionModal.vue): `src/components/AddTransactionModal.vue`
- [Receipt OCR](https://github.com/rhesal/finpraja/blob/main/src/components/AddTransactionModal.vue): `src/components/AddTransactionModal.vue`

### Insights

- [Dashboard](https://github.com/rhesal/finpraja/blob/main/src/views/HomeView.vue): `src/views/HomeView.vue`
- [Reports](https://github.com/rhesal/finpraja/blob/main/src/views/ReportsView.vue): `src/views/ReportsView.vue`

### Local data

- [Reactive queries](https://github.com/rhesal/finpraja/blob/main/src/composables/useLiveQuery.js): `src/composables/useLiveQuery.js`
- [Finance database](https://github.com/rhesal/finpraja/blob/main/src/db.js): `src/db.js`

### Other components

- **User**
- **Chart.js**
- **Tesseract.js**

## Connections

- User → App shell: opens app
- App bootstrap → App shell: mounts
- App bootstrap → View router: installs
- App shell → Finance database: initializes
- App shell → View router: renders views
- User → Navigation: selects view
- Navigation → View router: navigates
- Navigation → App shell: opens entry
- View router → Dashboard: dispatches
- View router → Transaction list: dispatches
- View router → Reports: dispatches
- View router → Settings & backup: dispatches
- App shell → Transaction entry: shows
- User → Transaction entry: enters transaction
- Transaction entry → Finance database: writes transaction
- Transaction entry → Receipt OCR: processes receipt
- Receipt OCR → Tesseract.js: recognizes text
- Dashboard → Reactive queries: subscribes to data
- Reactive queries → Finance database: queries
- Reports → Reactive queries: uses reactive queries
- Reports → Chart.js: renders charts
- Settings & backup → Finance database: manages budgets and data