# datle04/fintrack-frontend architecture

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

- Interactive diagram: https://gitdiagram.com/datle04/fintrack-frontend
- Repository: https://github.com/datle04/fintrack-frontend

## Overview

FinTrack is a React frontend for personal finance management. Users enter through login, then manage transactions, budgets, savings goals, dashboard summaries, and financial statistics; the README also documents alerts, AI advice, and PDF reports. Admins have a separate dashboard and management area. The sampled code confirms route composition, transaction-page dispatches, transaction-form actions, and authentication API calls. Other feature wiring is inferred only at the subsystem level from the README and file tree; backend and AI services are external.

Main entry points: [`src/App.jsx`](https://github.com/datle04/fintrack-frontend/blob/main/src/App.jsx) (App routes), [`src/pages/TransactionPage.jsx`](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/TransactionPage.jsx) (Transactions), [`src/features/authSlice.js`](https://github.com/datle04/fintrack-frontend/blob/main/src/features/authSlice.js) (Auth state), [`src/features/transactionSlice.js`](https://github.com/datle04/fintrack-frontend/blob/main/src/features/transactionSlice.js) (Transaction state)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["App routes<br/>[App.jsx]"]
  node_login["Login<br/>[LoginPage.jsx]"]
end

subgraph group_finance["Personal finance"]
  node_dashboard["Dashboard<br/>[DashboardPage.jsx]"]
  node_transactions["Transactions"]
  node_transaction_form["Transaction form"]
  node_budgets["Budgets<br/>[BudgetPage.jsx]"]
  node_goals["Savings goals<br/>[GoalPage.jsx]"]
  node_stats["Statistics<br/>[StatPage.jsx]"]
  node_settings["User settings<br/>[SettingPage.jsx]"]
end

subgraph group_admin["Administration"]
  node_admin_dashboard["Admin dashboard<br/>[AdminDashboard.jsx]"]
  node_admin_manage["Admin management<br/>[AdminUser.jsx]"]
end

subgraph group_integrations["Services and reporting"]
  node_reports["PDF reports<br/>[ReportExport.jsx]"]
  node_chat["AI advisor<br/>[ChatWidget.jsx]"]
  node_alerts["Alerts"]
end

subgraph group_state["Client state"]
  node_auth_state["Auth state<br/>[authSlice.js]"]
  node_transaction_state["Transaction state"]
  node_api_client["Axios client<br/>[axiosInstance.js]"]
  node_store["Redux store<br/>[store.js]"]
end

node_user(("User"))
node_backend{{"Backend API"}}
node_ai_service{{"Chatbot service"}}

node_user -->|"opens"| node_app
node_app -->|"routes"| node_login
node_app -->|"routes"| node_dashboard
node_app -->|"routes"| node_transactions
node_app -->|"routes"| node_budgets
node_app -->|"routes"| node_goals
node_app -->|"routes"| node_stats
node_app -->|"routes"| node_settings
node_app -->|"routes"| node_reports
node_app -->|"renders"| node_chat
node_app -->|"routes"| node_admin_dashboard
node_app -->|"routes"| node_admin_manage
node_transactions -->|"dispatches"| node_transaction_state
node_transactions -->|"opens"| node_transaction_form
node_transaction_form -->|"dispatches"| node_transaction_state
node_login -->|"dispatches"| node_auth_state
node_auth_state -->|"calls"| node_api_client
node_api_client -->|"requests"| node_backend
node_chat -.->|"advises"| node_ai_service
node_admin_dashboard -.->|"loads data"| node_backend
node_admin_manage -.->|"manages records"| node_backend
node_alerts -.->|"notifies"| node_user
node_store -->|"stores state"| node_auth_state
node_store -->|"stores state"| node_transaction_state

click node_app "https://github.com/datle04/fintrack-frontend/blob/main/src/App.jsx"
click node_login "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/LoginPage.jsx"
click node_dashboard "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/DashboardPage.jsx"
click node_transactions "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/TransactionPage.jsx"
click node_transaction_form "https://github.com/datle04/fintrack-frontend/blob/main/src/components/TransactionModal.jsx"
click node_budgets "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/BudgetPage.jsx"
click node_goals "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/GoalPage.jsx"
click node_stats "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/StatPage.jsx"
click node_settings "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/SettingPage.jsx"
click node_reports "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/ReportExport.jsx"
click node_chat "https://github.com/datle04/fintrack-frontend/blob/main/src/components/Chat/ChatWidget.jsx"
click node_alerts "https://github.com/datle04/fintrack-frontend/blob/main/src/features/notificationSlice.js"
click node_admin_dashboard "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/admin/AdminDashboard.jsx"
click node_admin_manage "https://github.com/datle04/fintrack-frontend/blob/main/src/pages/admin/AdminUser.jsx"
click node_auth_state "https://github.com/datle04/fintrack-frontend/blob/main/src/features/authSlice.js"
click node_transaction_state "https://github.com/datle04/fintrack-frontend/blob/main/src/features/transactionSlice.js"
click node_api_client "https://github.com/datle04/fintrack-frontend/blob/main/src/api/axiosInstance.js"
click node_store "https://github.com/datle04/fintrack-frontend/blob/main/src/store.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_app,node_login,node_user toneBlue
class node_dashboard,node_transactions,node_transaction_form,node_budgets,node_goals,node_stats,node_settings toneAmber
class node_admin_dashboard,node_admin_manage,node_backend toneMint
class node_reports,node_chat,node_alerts toneRose
class node_auth_state,node_transaction_state,node_api_client,node_store,node_ai_service toneIndigo
```

## Components

### Application shell

- [App routes](https://github.com/datle04/fintrack-frontend/blob/main/src/App.jsx): `src/App.jsx`
- [Login](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/LoginPage.jsx): `src/pages/LoginPage.jsx`

### Personal finance

- [Dashboard](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/DashboardPage.jsx): `src/pages/DashboardPage.jsx`
- [Transactions](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/TransactionPage.jsx): `src/pages/TransactionPage.jsx`
- [Transaction form](https://github.com/datle04/fintrack-frontend/blob/main/src/components/TransactionModal.jsx): `src/components/TransactionModal.jsx`
- [Budgets](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/BudgetPage.jsx): `src/pages/BudgetPage.jsx`
- [Savings goals](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/GoalPage.jsx): `src/pages/GoalPage.jsx`
- [Statistics](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/StatPage.jsx): `src/pages/StatPage.jsx`
- [User settings](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/SettingPage.jsx): `src/pages/SettingPage.jsx`

### Administration

- [Admin dashboard](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/admin/AdminDashboard.jsx): `src/pages/admin/AdminDashboard.jsx`
- [Admin management](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/admin/AdminUser.jsx): `src/pages/admin/AdminUser.jsx`

### Services and reporting

- [PDF reports](https://github.com/datle04/fintrack-frontend/blob/main/src/pages/ReportExport.jsx): `src/pages/ReportExport.jsx`
- [AI advisor](https://github.com/datle04/fintrack-frontend/blob/main/src/components/Chat/ChatWidget.jsx): `src/components/Chat/ChatWidget.jsx`
- [Alerts](https://github.com/datle04/fintrack-frontend/blob/main/src/features/notificationSlice.js): `src/features/notificationSlice.js`

### Client state

- [Auth state](https://github.com/datle04/fintrack-frontend/blob/main/src/features/authSlice.js): `src/features/authSlice.js`
- [Transaction state](https://github.com/datle04/fintrack-frontend/blob/main/src/features/transactionSlice.js): `src/features/transactionSlice.js`
- [Axios client](https://github.com/datle04/fintrack-frontend/blob/main/src/api/axiosInstance.js): `src/api/axiosInstance.js`
- [Redux store](https://github.com/datle04/fintrack-frontend/blob/main/src/store.js): `src/store.js`

### Other components

- **User**
- **Backend API**
- **Chatbot service**

## Connections

- User → App routes: opens
- App routes → Login: routes
- App routes → Dashboard: routes
- App routes → Transactions: routes
- App routes → Budgets: routes
- App routes → Savings goals: routes
- App routes → Statistics: routes
- App routes → User settings: routes
- App routes → PDF reports: routes
- App routes → AI advisor: renders
- App routes → Admin dashboard: routes
- App routes → Admin management: routes
- Transactions → Transaction state: dispatches
- Transactions → Transaction form: opens
- Transaction form → Transaction state: dispatches
- Login → Auth state: dispatches
- Auth state → Axios client: calls
- Axios client → Backend API: requests
- AI advisor → Chatbot service: advises
- Admin dashboard → Backend API: loads data
- Admin management → Backend API: manages records
- Alerts → User: notifies
- Redux store → Auth state: stores state
- Redux store → Transaction state: stores state