# m-thalmann/actual-dashboard architecture

> Architecture diagram of the GitHub repository m-thalmann/actual-dashboard, 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/m-thalmann/actual-dashboard
- Repository: https://github.com/m-thalmann/actual-dashboard

## Overview

Actual Dashboard is a web dashboard for viewing Actual Budget account data. Users sign in, browse accounts, open an account to inspect balances and history, and explore, filter, or export transactions and cash flow. The Angular frontend calls a NestJS API; the backend’s Actual service is the integration layer for the Actual budget server. The README documents that integration, while sampled backend controllers show the API operations; unsampled service wiring is not expanded beyond those documented boundaries.

Main entry points: [`apps/frontend/src/app/account-detail/account-detail.component.ts`](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail.component.ts) (Account Detail), [`apps/frontend/src/app/app.routes.ts`](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/app.routes.ts) (App Routes), [`apps/frontend/src/app/shared/api/accounts-data.service.ts`](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/accounts-data.service.ts) (Accounts API Client), [`apps/backend/src/app/common/actual/actual.service.ts`](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/common/actual/actual.service.ts) (Actual Service)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_frontend["Dashboard UI"]
  node_login["Login<br/>[login.component.ts]"]
  node_routes["App Routes<br/>[app.routes.ts]"]
  node_overview["Accounts Overview"]
  node_accountdetail["Account Detail"]
  node_graphs["Account Graphs"]
  node_transactionsui["Transactions Table"]
  node_filters["Transaction Filters"]
  node_exportui["Transaction Export"]
  node_authclient["Auth Client<br/>[auth.service.ts]"]
  node_authapi["Auth API Client"]
  node_accountapi["Accounts API Client"]
  node_transactionapi["Transactions API Client"]
end

subgraph group_api["Dashboard API"]
  node_authcontroller["Auth Controller<br/>[auth.controller.ts]"]
  node_authservice["Auth Service<br/>[auth.service.ts]"]
  node_guard["Auth Guard<br/>[auth.guard.ts]"]
  node_accountscontroller["Accounts Controller"]
  node_transactionscontroller["Transactions Controller"]
  node_generalcontroller["General Controller"]
end

subgraph group_actual["Actual Integration"]
  node_actualservice["Actual Service<br/>[actual.service.ts]"]
end

subgraph group_shared["Shared Contracts"]
  node_sharedtypes["Shared Types<br/>[index.ts]"]
end

node_user(("User"))
node_actualserver[("Actual Server")]

node_user -->|"navigates"| node_routes
node_routes -->|"routes login"| node_login
node_routes -->|"routes accounts"| node_overview
node_routes -->|"routes detail"| node_accountdetail
node_login -->|"submits credentials"| node_authapi
node_authapi -->|"POST login"| node_authcontroller
node_authcontroller -->|"signs in"| node_authservice
node_authservice -->|"returns token"| node_authcontroller
node_login -->|"stores session"| node_authclient
node_overview -->|"loads accounts"| node_accountapi
node_accountdetail -->|"loads account data"| node_accountapi
node_accountdetail -->|"loads transactions"| node_transactionapi
node_accountdetail -->|"shows history"| node_graphs
node_accountdetail -->|"shows transactions"| node_transactionsui
node_transactionsui -->|"filters list"| node_filters
node_transactionsui -->|"offers export"| node_exportui
node_accountapi -->|"requests account data"| node_accountscontroller
node_transactionapi -->|"requests transaction data"| node_transactionscontroller
node_accountscontroller -->|"reads account data"| node_actualservice
node_transactionscontroller -->|"reads and exports"| node_actualservice
node_generalcontroller -->|"reloads data"| node_actualservice
node_actualservice -.->|"integrates budget data"| node_actualserver
node_sharedtypes -.->|"types API data"| node_accountapi

click node_login "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/login/login.component.ts"
click node_routes "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/app.routes.ts"
click node_overview "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/accounts-overview/accounts-overview.component.ts"
click node_accountdetail "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail.component.ts"
click node_graphs "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-graphs/account-detail-graphs.component.ts"
click node_transactionsui "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-transactions-table.component.ts"
click node_filters "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-filter/account-detail-filter.component.ts"
click node_exportui "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-export/account-detail-export.component.ts"
click node_authclient "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/auth/auth.service.ts"
click node_authapi "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/auth-data.service.ts"
click node_accountapi "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/accounts-data.service.ts"
click node_transactionapi "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/transactions-data.service.ts"
click node_authcontroller "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.controller.ts"
click node_authservice "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.service.ts"
click node_guard "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.guard.ts"
click node_accountscontroller "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/accounts/accounts.controller.ts"
click node_transactionscontroller "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/transactions/transactions.controller.ts"
click node_generalcontroller "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/general/general.controller.ts"
click node_actualservice "https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/common/actual/actual.service.ts"
click node_sharedtypes "https://github.com/m-thalmann/actual-dashboard/blob/main/libs/shared/types/src/index.ts"

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_login,node_routes,node_overview,node_accountdetail,node_graphs,node_transactionsui,node_filters,node_exportui,node_authclient,node_authapi,node_accountapi,node_transactionapi,node_user toneBlue
class node_authcontroller,node_authservice,node_guard,node_accountscontroller,node_transactionscontroller,node_generalcontroller,node_actualserver toneAmber
class node_actualservice toneMint
class node_sharedtypes toneRose
```

## Components

### Dashboard UI

- [Login](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/login/login.component.ts): `apps/frontend/src/app/login/login.component.ts`
- [App Routes](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/app.routes.ts): `apps/frontend/src/app/app.routes.ts`
- [Accounts Overview](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/accounts-overview/accounts-overview.component.ts): `apps/frontend/src/app/accounts-overview/accounts-overview.component.ts`
- [Account Detail](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail.component.ts): `apps/frontend/src/app/account-detail/account-detail.component.ts`
- [Account Graphs](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-graphs/account-detail-graphs.component.ts): `apps/frontend/src/app/account-detail/account-detail-graphs/account-detail-graphs.component.ts`
- [Transactions Table](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-transactions-table.component.ts): `apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-transactions-table.component.ts`
- [Transaction Filters](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-filter/account-detail-filter.component.ts): `apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-filter/account-detail-filter.component.ts`
- [Transaction Export](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-export/account-detail-export.component.ts): `apps/frontend/src/app/account-detail/account-detail-transactions-table/account-detail-export/account-detail-export.component.ts`
- [Auth Client](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/auth/auth.service.ts): `apps/frontend/src/app/shared/auth/auth.service.ts`
- [Auth API Client](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/auth-data.service.ts): `apps/frontend/src/app/shared/api/auth-data.service.ts`
- [Accounts API Client](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/accounts-data.service.ts): `apps/frontend/src/app/shared/api/accounts-data.service.ts`
- [Transactions API Client](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/frontend/src/app/shared/api/transactions-data.service.ts): `apps/frontend/src/app/shared/api/transactions-data.service.ts`

### Dashboard API

- [Auth Controller](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.controller.ts): `apps/backend/src/app/auth/auth.controller.ts`
- [Auth Service](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.service.ts): `apps/backend/src/app/auth/auth.service.ts`
- [Auth Guard](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/auth/auth.guard.ts): `apps/backend/src/app/auth/auth.guard.ts`
- [Accounts Controller](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/accounts/accounts.controller.ts): `apps/backend/src/app/accounts/accounts.controller.ts`
- [Transactions Controller](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/transactions/transactions.controller.ts): `apps/backend/src/app/transactions/transactions.controller.ts`
- [General Controller](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/general/general.controller.ts): `apps/backend/src/app/general/general.controller.ts`

### Actual Integration

- [Actual Service](https://github.com/m-thalmann/actual-dashboard/blob/main/apps/backend/src/app/common/actual/actual.service.ts): `apps/backend/src/app/common/actual/actual.service.ts`

### Shared Contracts

- [Shared Types](https://github.com/m-thalmann/actual-dashboard/blob/main/libs/shared/types/src/index.ts): `libs/shared/types/src/index.ts`

### Other components

- **User**
- **Actual Server**

## Connections

- User → App Routes: navigates
- App Routes → Login: routes login
- App Routes → Accounts Overview: routes accounts
- App Routes → Account Detail: routes detail
- Login → Auth API Client: submits credentials
- Auth API Client → Auth Controller: POST login
- Auth Controller → Auth Service: signs in
- Auth Service → Auth Controller: returns token
- Login → Auth Client: stores session
- Accounts Overview → Accounts API Client: loads accounts
- Account Detail → Accounts API Client: loads account data
- Account Detail → Transactions API Client: loads transactions
- Account Detail → Account Graphs: shows history
- Account Detail → Transactions Table: shows transactions
- Transactions Table → Transaction Filters: filters list
- Transactions Table → Transaction Export: offers export
- Accounts API Client → Accounts Controller: requests account data
- Transactions API Client → Transactions Controller: requests transaction data
- Accounts Controller → Actual Service: reads account data
- Transactions Controller → Actual Service: reads and exports
- General Controller → Actual Service: reloads data
- Actual Service → Actual Server: integrates budget data
- Shared Types → Accounts API Client: types API data