How lkvu2006-ui/quanlychitieu_lekhacvu works
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: Dashboard.jsx Dashboard · App.jsx Route Guard · AuthContext.jsx Auth Context · config.js Firebase Setup
Components 14
App Routing
- React Entry
src/main.jsx - Route Guard
src/App.jsx
Account Access
- Sign In
src/pages/Login.jsx - Registration
src/pages/Register.jsx - Auth Context
src/context/AuthContext.jsx - Firebase Setup
src/firebase/config.js
Transactions
- Dashboard
src/pages/Dashboard.jsx - Transaction Form
src/components/ExpenseForm.jsx - Transaction Item
src/components/ExpenseItem.jsx
Financial Views
- Category Chart
src/components/ExpenseChart.jsx - Calendar View
src/components/CalendarView.jsx
Other components
- User
- Firebase Auth
- Expense Records
Connections 22
- User → React Entry: opens app
src/main.jsx - React Entry → Route Guard: renders
src/main.jsx - Route Guard → Auth Context: provides auth
src/App.jsx - Route Guard → Sign In: routes to
src/App.jsx - Route Guard → Registration: routes to
src/App.jsx - Route Guard → Dashboard: protects route
src/App.jsx - User → Sign In: signs in
src/pages/Login.jsx - User → Registration: creates account
src/pages/Register.jsx - Sign In → Auth Context: calls login
src/pages/Login.jsx - Registration → Auth Context: calls signup
src/pages/Register.jsx - Auth Context → Firebase Setup: uses auth config
src/context/AuthContext.jsx - Firebase Setup → Firebase Auth: initializes
src/firebase/config.js - Dashboard → Auth Context: reads session
src/pages/Dashboard.jsx - Dashboard → Expense Records: subscribes to records
- Dashboard → Transaction Form: renders
src/pages/Dashboard.jsx - Dashboard → Transaction Item: renders
src/pages/Dashboard.jsx - Dashboard → Category Chart: renders
src/pages/Dashboard.jsx - Dashboard → Calendar View: renders
src/pages/Dashboard.jsx - Transaction Form → Expense Records: writes transaction
src/components/ExpenseForm.jsx - Transaction Item → Expense Records: deletes transaction
src/components/ExpenseItem.jsx - Transaction Form → Firebase Setup: uses database config
src/components/ExpenseForm.jsx - Transaction Item → Firebase Setup: uses database config
src/components/ExpenseItem.jsx