# lkvu2006-ui/quanlychitieu_lekhacvu architecture

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

- Interactive diagram: https://gitdiagram.com/lkvu2006-ui/quanlychitieu_lekhacvu
- Repository: https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu

## Overview

This is a personal income-and-expense tracker: users register or sign in, enter transactions, and view them in a protected dashboard with summaries, category charts, a calendar, filters, and budget information. The dashboard is the main workflow coordinator; transaction entry and deletion write to Firebase Realtime Database, while authentication state and account actions are provided through a shared context. Source excerpts confirm the principal routes, component rendering, and writes. The dashboard’s database read implementation is only partially shown, so that relationship is marked unverified.

Main entry points: [`src/pages/Dashboard.jsx`](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Dashboard.jsx) (Dashboard), [`src/App.jsx`](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/App.jsx) (Route Guard), [`src/context/AuthContext.jsx`](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/context/AuthContext.jsx) (Auth Context), [`src/firebase/config.js`](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/firebase/config.js) (Firebase Setup)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_routing["App Routing"]
  node_entry["React Entry<br/>[main.jsx]"]
  node_app["Route Guard<br/>[App.jsx]"]
end

subgraph group_accounts["Account Access"]
  node_login["Sign In<br/>[Login.jsx]"]
  node_register["Registration<br/>[Register.jsx]"]
  node_auth["Auth Context<br/>[AuthContext.jsx]"]
  node_firebase["Firebase Setup<br/>[config.js]"]
end

subgraph group_transactions["Transactions"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_form["Transaction Form<br/>[ExpenseForm.jsx]"]
  node_item["Transaction Item<br/>[ExpenseItem.jsx]"]
end

subgraph group_insights["Financial Views"]
  node_chart["Category Chart<br/>[ExpenseChart.jsx]"]
  node_calendar["Calendar View<br/>[CalendarView.jsx]"]
end

node_user(("User"))
node_firebase_auth[("Firebase Auth")]
node_records[("Expense Records")]

node_user -->|"opens app"| node_entry
node_entry -->|"renders"| node_app
node_app -->|"provides auth"| node_auth
node_app -->|"routes to"| node_login
node_app -->|"routes to"| node_register
node_app -->|"protects route"| node_dashboard
node_user -->|"signs in"| node_login
node_user -->|"creates account"| node_register
node_login -->|"calls login"| node_auth
node_register -->|"calls signup"| node_auth
node_auth -->|"uses auth config"| node_firebase
node_firebase -->|"initializes"| node_firebase_auth
node_dashboard -->|"reads session"| node_auth
node_dashboard -.->|"subscribes to records"| node_records
node_dashboard -->|"renders"| node_form
node_dashboard -->|"renders"| node_item
node_dashboard -->|"renders"| node_chart
node_dashboard -->|"renders"| node_calendar
node_form -->|"writes transaction"| node_records
node_item -->|"deletes transaction"| node_records
node_form -->|"uses database config"| node_firebase
node_item -->|"uses database config"| node_firebase

click node_entry "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/main.jsx"
click node_app "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/App.jsx"
click node_login "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Login.jsx"
click node_register "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Register.jsx"
click node_auth "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/context/AuthContext.jsx"
click node_firebase "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/firebase/config.js"
click node_dashboard "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Dashboard.jsx"
click node_form "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseForm.jsx"
click node_item "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseItem.jsx"
click node_chart "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseChart.jsx"
click node_calendar "https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/CalendarView.jsx"

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_app,node_user toneBlue
class node_login,node_register,node_auth,node_firebase,node_firebase_auth,node_records toneAmber
class node_dashboard,node_form,node_item toneMint
class node_chart,node_calendar toneRose
```

## Components

### App Routing

- [React Entry](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/main.jsx): `src/main.jsx`
- [Route Guard](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/App.jsx): `src/App.jsx`

### Account Access

- [Sign In](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Login.jsx): `src/pages/Login.jsx`
- [Registration](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Register.jsx): `src/pages/Register.jsx`
- [Auth Context](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Firebase Setup](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/firebase/config.js): `src/firebase/config.js`

### Transactions

- [Dashboard](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/pages/Dashboard.jsx): `src/pages/Dashboard.jsx`
- [Transaction Form](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseForm.jsx): `src/components/ExpenseForm.jsx`
- [Transaction Item](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseItem.jsx): `src/components/ExpenseItem.jsx`

### Financial Views

- [Category Chart](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/ExpenseChart.jsx): `src/components/ExpenseChart.jsx`
- [Calendar View](https://github.com/lkvu2006-ui/quanlychitieu_lekhacvu/blob/main/src/components/CalendarView.jsx): `src/components/CalendarView.jsx`

### Other components

- **User**
- **Firebase Auth**
- **Expense Records**

## Connections

- User → React Entry: opens app (evidence: `src/main.jsx`)
- React Entry → Route Guard: renders (evidence: `src/main.jsx`)
- Route Guard → Auth Context: provides auth (evidence: `src/App.jsx`)
- Route Guard → Sign In: routes to (evidence: `src/App.jsx`)
- Route Guard → Registration: routes to (evidence: `src/App.jsx`)
- Route Guard → Dashboard: protects route (evidence: `src/App.jsx`)
- User → Sign In: signs in (evidence: `src/pages/Login.jsx`)
- User → Registration: creates account (evidence: `src/pages/Register.jsx`)
- Sign In → Auth Context: calls login (evidence: `src/pages/Login.jsx`)
- Registration → Auth Context: calls signup (evidence: `src/pages/Register.jsx`)
- Auth Context → Firebase Setup: uses auth config (evidence: `src/context/AuthContext.jsx`)
- Firebase Setup → Firebase Auth: initializes (evidence: `src/firebase/config.js`)
- Dashboard → Auth Context: reads session (evidence: `src/pages/Dashboard.jsx`)
- Dashboard → Expense Records: subscribes to records
- Dashboard → Transaction Form: renders (evidence: `src/pages/Dashboard.jsx`)
- Dashboard → Transaction Item: renders (evidence: `src/pages/Dashboard.jsx`)
- Dashboard → Category Chart: renders (evidence: `src/pages/Dashboard.jsx`)
- Dashboard → Calendar View: renders (evidence: `src/pages/Dashboard.jsx`)
- Transaction Form → Expense Records: writes transaction (evidence: `src/components/ExpenseForm.jsx`)
- Transaction Item → Expense Records: deletes transaction (evidence: `src/components/ExpenseItem.jsx`)
- Transaction Form → Firebase Setup: uses database config (evidence: `src/components/ExpenseForm.jsx`)
- Transaction Item → Firebase Setup: uses database config (evidence: `src/components/ExpenseItem.jsx`)