Asset IT

Hệ thống quản lý tài sản IT gồm React/Vite frontend, Node.js/Express API, SQLite database và Python endpoint agent.

Chức năng

• Đăng nhập JWT, role ADMIN/USER
• Dashboard: tổng tài sản, trạng thái, online, bảo hành sắp hết, bảo trì
• Asset CRUD + tìm kiếm + lọc + phân trang
• Chi tiết asset và audit history
• Nhân viên và gán tài sản
• Phiếu bảo trì, chi phí, trạng thái
• Agent inventory qua API token
• Lịch sử thao tác
• Quản lý tài khoản Admin

1. Chạy backend

cd backend
copy .env.example .env
npm install
npm start

API: http://localhost:4000

2. Chạy frontend

Mở terminal mới:

cd frontend
npm install
npm run dev

Web: http://localhost:5173

3. Tài khoản demo

• username: admin
• password: admin123

4. Chạy Agent Windows

Mở terminal mới:

cd agent
python -m venv venv
.\venv\Scripts\activate
pip install -r requirements.txt
python agent.py --server http://localhost:4000 --token CHANGE_ME_AGENT_TOKEN

Muốn Agent gửi định kỳ 5 phút:

python agent.py --server http://localhost:4000 --token CHANGE_ME_AGENT_TOKEN --interval 300

5. Biến môi trường

Sửa backend/.env:

PORT=4000
DB_FILE=./data/asset-it.db
JWT_SECRET=change-to-a-long-random-secret
AGENT_TOKEN=CHANGE_ME_AGENT_TOKEN

6. GitHub

git init
git add .
git commit -m "Build complete Asset IT system"
git branch -M main
git remote add origin https://github.com/USERNAME/asset-it-simple.git
git push -u origin main

Luồng hệ thống

Endpoint -> Python Agent -> POST /api/agent/inventory -> Express -> SQLite -> React dashboard.

Đây là bản học tập/MVP có cấu trúc mở rộng. Trước production cần đổi secret/token, HTTPS, backup, logging, reverse proxy và hardening quyền truy cập.

v2.1 Stable UI

• Added React Error Boundary so a page error shows a recovery screen instead of a blank page.
• Navigation is persisted in the URL hash (#/dashboard, #/assets, etc.), so changing sections is more stable.
• API/network errors are displayed clearly instead of causing an opaque blank state.

v2.2 Navigation / blank-page fix

• Navigation now updates React state immediately instead of relying only on hashchange.
• Browser Back/Forward is synchronized with the current page.
• Each route renders its component directly, avoiding construction of every page component on every App render.
• A route-specific Error Boundary is reset on navigation and shows the actual error plus recovery actions instead of a blank page.
• The URL hash remains compatible with direct links such as #/maintenance.