docs: rewrite README with setup and usage guide

README.md

-# React + TypeScript + Vite
+# Data Crawler — Frontend
 
-This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+Giao diện web quản lý các crawl jobs, được xây dựng bằng **React 19 + TypeScript + Vite**, sử dụng **Tailwind CSS v4** và kết nối với [Data Crawler Backend](../README.md).
 
-Currently, two official plugins are available:
+---
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+## 📋 Mục lục
 
-## React Compiler
+- [Yêu cầu hệ thống](#-yêu-cầu-hệ-thống)
+- [Cài đặt](#-cài-đặt)
+- [Cấu hình môi trường](#-cấu-hình-môi-trường)
+- [Chạy dự án](#-chạy-dự-án)
+- [Cấu trúc thư mục](#-cấu-trúc-thư-mục)
+- [Tính năng](#-tính-năng)
+- [Phân quyền](#-phân-quyền)
+- [Scripts](#-scripts)
+- [Công nghệ sử dụng](#-công-nghệ-sử-dụng)
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+---
 
-## Expanding the Oxlint configuration
+## 💻 Yêu cầu hệ thống
 
-If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+| Công cụ | Phiên bản tối thiểu |
+|---------|-------------------|
+| Node.js | >= 20.x           |
+| pnpm    | >= 9.x            |
+| Backend | Đang chạy tại `http://localhost:3000` |
 
-```json
-{
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["react", "typescript", "oxc"],
-  "options": {
-    "typeAware": true
-  },
-  "rules": {
-    "react/rules-of-hooks": "error",
-    "react/only-export-components": ["warn", { "allowConstantExport": true }]
-  }
-}
+> **Lưu ý:** Dự án sử dụng `pnpm` làm package manager. Nếu chưa cài, chạy: `npm install -g pnpm`
+
+---
+
+## 🚀 Cài đặt
+
+```bash
+# 1. Di chuyển vào thư mục frontend
+cd frontend-data-crawler-be
+
+# 2. Cài đặt dependencies
+pnpm install
+```
+
+---
+
+## ⚙️ Cấu hình môi trường
+
+Hiện tại URL của backend được cấu hình trực tiếp trong file `src/services/api.ts`:
+
+```ts
+const API_BASE_URL = 'http://localhost:3000/api/v1';
+```
+
+Nếu backend của bạn chạy ở cổng hoặc host khác, hãy cập nhật giá trị này tương ứng.
+
+> **Sắp tới:** Có thể chuyển sang dùng biến môi trường `.env` với `VITE_API_BASE_URL` để linh hoạt hơn khi deploy.
+
+---
+
+## ▶️ Chạy dự án
+
+### Development (khuyến nghị)
+
+```bash
+pnpm dev
+```
+
+Ứng dụng sẽ chạy tại: **http://localhost:5173**
+
+Hot Module Replacement (HMR) được bật mặc định — các thay đổi code sẽ tự reload ngay lập tức.
+
+### Build Production
+
+```bash
+pnpm build
 ```
 
-See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
+Output sẽ nằm trong thư mục `dist/`.
+
+### Preview bản build
+
+```bash
+pnpm preview
+```
+
+Xem trước bản build production tại: **http://localhost:4173**
+
+### Lint
+
+```bash
+pnpm lint
+```
+
+---
+
+## 📁 Cấu trúc thư mục
+
+```
+frontend-data-crawler-be/
+├── public/                   # Static assets (favicon, ...)
+├── src/
+│   ├── assets/               # Hình ảnh, font, icon dùng trong app
+│   ├── components/           # UI components tái sử dụng
+│   │   ├── GuestRoute.tsx    # Bảo vệ route chỉ dành cho khách (chưa đăng nhập)
+│   │   └── ProtectedRoute.tsx# Bảo vệ route yêu cầu xác thực / phân quyền
+│   ├── context/
+│   │   └── AuthContext.tsx   # Quản lý trạng thái xác thực toàn cục
+│   ├── layouts/
+│   │   └── DashboardLayout.tsx # Layout chính với sidebar/navbar
+│   ├── pages/
+│   │   ├── Login.tsx         # Trang đăng nhập
+│   │   ├── Register.tsx      # Trang đăng ký tài khoản
+│   │   ├── Dashboard.tsx     # Trang chính — danh sách crawl jobs
+│   │   ├── JobDetail.tsx     # Trang chi tiết một crawl job
+│   │   ├── Profile.tsx       # Trang hồ sơ cá nhân
+│   │   ├── Users.tsx         # Quản lý người dùng (Admin only)
+│   │   └── Logs.tsx          # Xem logs hệ thống (Admin only)
+│   ├── services/
+│   │   └── api.ts            # Axios instance + interceptors (auto refresh token)
+│   ├── App.tsx               # Định nghĩa routing toàn bộ ứng dụng
+│   ├── main.tsx              # Entry point
+│   └── index.css             # Global styles (Tailwind CSS)
+├── index.html                # HTML template gốc
+├── vite.config.ts            # Cấu hình Vite
+├── tsconfig.json             # Cấu hình TypeScript
+└── package.json
+```
+
+---
+
+## ✨ Tính năng
+
+### 🔐 Xác thực
+- Đăng ký / Đăng nhập tài khoản
+- Tự động refresh Access Token khi hết hạn (sử dụng Refresh Token)
+- Tự động logout và redirect về `/login` khi không còn phiên hợp lệ
+- Lưu token trong `localStorage`
+
+### 📊 Dashboard
+- Xem danh sách tất cả các crawl jobs
+- Tạo crawl job mới
+- Lọc và theo dõi trạng thái job (`pending`, `running`, `completed`, `failed`)
+
+### 🔍 Job Detail
+- Xem chi tiết kết quả của từng crawl job
+- Xuất dữ liệu (CSV, ZIP, ...)
+
+### 👤 Profile
+- Xem và cập nhật thông tin cá nhân
+
+### 🛡️ Admin
+- Quản lý danh sách người dùng (chỉ ADMIN)
+- Xem system logs (chỉ ADMIN)
+
+---
+
+## 🔑 Phân quyền
+
+Ứng dụng có 2 loại route được bảo vệ:
+
+| Component | Mô tả |
+|-----------|-------|
+| `<GuestRoute>` | Chỉ cho phép người dùng **chưa đăng nhập**. Nếu đã đăng nhập sẽ redirect về `/` |
+| `<ProtectedRoute>` | Yêu cầu **đã đăng nhập**. Hỗ trợ prop `allowedRoles` để kiểm tra vai trò |
+
+**Ví dụ:**
+```tsx
+// Chỉ ADMIN mới truy cập được
+<ProtectedRoute allowedRoles={['ADMIN']}>
+  <Users />
+</ProtectedRoute>
+```
+
+---
+
+## 📦 Scripts
+
+| Lệnh | Mô tả |
+|------|-------|
+| `pnpm dev` | Khởi chạy dev server tại `localhost:5173` |
+| `pnpm build` | Build production vào thư mục `dist/` |
+| `pnpm preview` | Preview bản build tại `localhost:4173` |
+| `pnpm lint` | Kiểm tra lỗi code bằng Oxlint |
+
+---
+
+## 🛠️ Công nghệ sử dụng
+
+| Thư viện | Phiên bản | Mục đích |
+|----------|-----------|---------|
+| React | ^19 | UI framework |
+| TypeScript | ~6.0 | Type safety |
+| Vite | ^8 | Build tool & dev server |
+| React Router DOM | ^7 | Client-side routing |
+| Axios | ^1.18 | HTTP client |
+| Tailwind CSS | ^4 | Utility-first CSS framework |
+| Lucide React | ^1.23 | Icon library |
+| Oxlint | ^1.71 | Linter (thay thế ESLint) |
+
+---
+
+## 🔗 Liên kết
+
+- [Backend Repository](../README.md)
+- [Postman Environment](../docs/postman/data-crawler.postman_environment.json)
+- [Vite Documentation](https://vite.dev)
+- [React Documentation](https://react.dev)