# wiranata-orion/forecasting-my-finances architecture

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

- Interactive diagram: https://gitdiagram.com/wiranata-orion/forecasting-my-finances
- Repository: https://github.com/wiranata-orion/forecasting-my-finances

## Overview

This is a personal-finance tracker: users record income, expenses and planned costs, then review balances, spending analytics and a next-month forecast. The dashboard orchestrates data loading and presents the distinct transaction, planned-expense, analytics, and forecasting stages through dedicated views; a frontend API service communicates with Flask, which applies domain logic and persists records in SQLite. The README documents wallet/balance views, cutoff-cycle settings, forecast insights and accuracy evaluation. Some component/API wiring and forecast endpoints are unsampled, so those relationships are shown only where directly evidenced or documented.

Main entry points: [`frontend/src/components/Home.vue`](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/Home.vue) (Dashboard orchestration), [`frontend/src/utils/formatters.js`](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/utils/formatters.js) (Display formatters), [`backend/app.py`](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/app.py) (Finance API), [`frontend/src/services/api.js`](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/services/api.js) (HTTP API client)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Dashboard UI"]
  node_home["Dashboard orchestration<br/>[Home.vue]"]
  node_activity["Transaction activity<br/>[ActivityLog.vue]"]
  node_transaction_modal["Transaction entry"]
  node_planned_view["Planned expenses"]
  node_planned_modal["Plan entry"]
  node_overview["Overview cards<br/>[OverviewCards.vue]"]
  node_donut["Allocation donut<br/>[DonutAnalytics.vue]"]
  node_daily["Daily analytics"]
  node_wallet["Wallet balances<br/>[WalletDonut.vue]"]
  node_forecast_view["Forecast view"]
  node_budget["Budget view<br/>[Budget.vue]"]
  node_formatters["Display formatters<br/>[formatters.js]"]
end

subgraph group_api["API and domain"]
  node_api_client["HTTP API client<br/>[api.js]"]
  node_flask["Finance API<br/>[app.py]"]
  node_express["Legacy expenses API<br/>[server.js]"]
  node_expenses_route["In-memory expenses<br/>[expenses.js]"]
end

subgraph group_store["Persistence"]
  node_sqlite[("Finance SQLite<br/>[database.py]")]
end

subgraph group_forecast["Forecasting"]
  node_forecast_model["Forecast model<br/>[forecaster.py]"]
end

node_user(("Finance user"))

node_user -->|"uses"| node_home
node_home -->|"renders"| node_overview
node_home -->|"renders"| node_donut
node_home -->|"renders"| node_daily
node_home -->|"renders"| node_planned_view
node_home -->|"renders"| node_forecast_view
node_home -->|"renders"| node_activity
node_home -->|"renders"| node_transaction_modal
node_home -->|"renders"| node_planned_modal
node_home -->|"requests data"| node_api_client
node_transaction_modal -->|"creates transactions"| node_api_client
node_api_client -.->|"HTTP requests"| node_flask
node_flask -->|"reads and writes"| node_sqlite
node_flask -->|"runs forecast"| node_forecast_model
node_home -.->|"presents balances"| node_wallet
node_forecast_view -->|"formats values"| node_formatters
node_activity -->|"formats entries"| node_formatters
node_overview -->|"formats values"| node_formatters
node_donut -->|"formats values"| node_formatters
node_daily -->|"formats dates"| node_formatters
node_planned_view -->|"formats values"| node_formatters
node_express -->|"mounts route"| node_expenses_route
node_user -.->|"opens"| node_budget

click node_home "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/Home.vue"
click node_activity "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/ActivityLog.vue"
click node_transaction_modal "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/AddTransactionModal.vue"
click node_planned_view "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/PlannedExpenses.vue"
click node_planned_modal "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/AddPlannedModal.vue"
click node_overview "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/OverviewCards.vue"
click node_donut "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/DonutAnalytics.vue"
click node_daily "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/DailyBarAnalytics.vue"
click node_wallet "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/WalletDonut.vue"
click node_forecast_view "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/ForecastingView.vue"
click node_budget "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/Budget.vue"
click node_api_client "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/services/api.js"
click node_flask "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/app.py"
click node_forecast_model "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/forecaster.py"
click node_sqlite "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/database.py"
click node_express "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/server.js"
click node_expenses_route "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/routes/expenses.js"
click node_formatters "https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/utils/formatters.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_home,node_activity,node_transaction_modal,node_planned_view,node_planned_modal,node_overview,node_donut,node_daily,node_wallet,node_forecast_view,node_budget,node_formatters,node_user toneBlue
class node_api_client,node_flask,node_express,node_expenses_route toneAmber
class node_sqlite toneMint
class node_forecast_model toneRose
```

## Components

### Dashboard UI

- [Dashboard orchestration](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/Home.vue): `frontend/src/components/Home.vue`
- [Transaction activity](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/ActivityLog.vue): `frontend/src/components/ActivityLog.vue`
- [Transaction entry](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/AddTransactionModal.vue): `frontend/src/components/AddTransactionModal.vue`
- [Planned expenses](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/PlannedExpenses.vue): `frontend/src/components/PlannedExpenses.vue`
- [Plan entry](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/AddPlannedModal.vue): `frontend/src/components/AddPlannedModal.vue`
- [Overview cards](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/OverviewCards.vue): `frontend/src/components/OverviewCards.vue`
- [Allocation donut](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/DonutAnalytics.vue): `frontend/src/components/DonutAnalytics.vue`
- [Daily analytics](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/DailyBarAnalytics.vue): `frontend/src/components/DailyBarAnalytics.vue`
- [Wallet balances](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/WalletDonut.vue): `frontend/src/components/WalletDonut.vue`
- [Forecast view](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/ForecastingView.vue): `frontend/src/components/ForecastingView.vue`
- [Budget view](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/components/Budget.vue): `frontend/src/components/Budget.vue`
- [Display formatters](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/utils/formatters.js): `frontend/src/utils/formatters.js`

### API and domain

- [HTTP API client](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/frontend/src/services/api.js): `frontend/src/services/api.js`
- [Finance API](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/app.py): `backend/app.py`
- [Legacy expenses API](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/server.js): `backend/server.js`
- [In-memory expenses](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/routes/expenses.js): `backend/routes/expenses.js`

### Persistence

- [Finance SQLite](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/database.py): `backend/database.py`

### Forecasting

- [Forecast model](https://github.com/wiranata-orion/forecasting-my-finances/blob/main/backend/forecaster.py): `backend/forecaster.py`

### Other components

- **Finance user**

## Connections

- Finance user → Dashboard orchestration: uses (evidence: `README.md`)
- Dashboard orchestration → Overview cards: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Allocation donut: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Daily analytics: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Planned expenses: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Forecast view: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Transaction activity: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Transaction entry: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → Plan entry: renders (evidence: `frontend/src/components/Home.vue`)
- Dashboard orchestration → HTTP API client: requests data (evidence: `frontend/src/components/Home.vue`)
- Transaction entry → HTTP API client: creates transactions (evidence: `frontend/src/components/AddTransactionModal.vue`)
- HTTP API client → Finance API: HTTP requests
- Finance API → Finance SQLite: reads and writes (evidence: `backend/app.py`)
- Finance API → Forecast model: runs forecast (evidence: `backend/app.py`)
- Dashboard orchestration → Wallet balances: presents balances
- Forecast view → Display formatters: formats values (evidence: `frontend/src/components/ForecastingView.vue`)
- Transaction activity → Display formatters: formats entries (evidence: `frontend/src/components/ActivityLog.vue`)
- Overview cards → Display formatters: formats values (evidence: `frontend/src/components/OverviewCards.vue`)
- Allocation donut → Display formatters: formats values (evidence: `frontend/src/components/DonutAnalytics.vue`)
- Daily analytics → Display formatters: formats dates (evidence: `frontend/src/components/DailyBarAnalytics.vue`)
- Planned expenses → Display formatters: formats values (evidence: `frontend/src/components/PlannedExpenses.vue`)
- Legacy expenses API → In-memory expenses: mounts route (evidence: `backend/server.js`)
- Finance user → Budget view: opens