# Hướng dẫn xem bộ mockup Dashboard Call Center

## Đây là gì
Bộ mockup **tĩnh**: HTML + một `style.css` dùng chung, kèm `call-dialog.js` chỉ để minh họa hộp xác nhận gọi. **Dữ liệu là dữ liệu mẫu bịa** (tên, số điện thoại, số liệu), không gọi API thật, không có logic nghiệp vụ. Không dùng CDN, thư viện hay tài nguyên ngoài, nên xem được khi không có mạng.

## Cách mở
1. Mở `index.html` trong thư mục này bằng cách nhấp đúp (địa chỉ dạng `file://`). Không cần máy chủ, không cần cài đặt.
2. Từ `index.html` bấm vào từng màn hình. Menu trên cùng đưa về Danh sách, Dashboard, Cuộc gọi, Khách hàng, Softphone, Thành phần, Tải về.
3. Giữ nguyên các tệp cùng thư mục vì liên kết là tương đối. Liên kết `../design-*.md` mở tài liệu thiết kế ở thư mục cha: **các tệp này không có trong zip**, nên liên kết sẽ không mở được khi xem từ bản giải nén (chỉ mở được trong kho dự án, cần trình đọc Markdown hoặc trình soạn thảo).

## Danh sách màn hình
| Tệp | Nội dung |
|---|---|
| `dashboard.html`, `dashboard-states.html` | Dashboard; đang tải, rỗng, lỗi |
| `charts.html` | Thư viện biểu đồ SVG |
| `components.html` | Thư viện thành phần |
| `calls.html`, `calls-states.html` | Bảng cuộc gọi, bộ lọc; các trạng thái |
| `customers.html`, `customers-manager.html` | Khách hàng, vai Nhân viên và Quản lý |
| `customer-detail.html`, `customer-detail-manager.html` | Chi tiết khách, hai vai |
| `softphone.html` | Softphone 9 trạng thái, ghi chú sau cuộc gọi |
| `download.html` | Tải zip bộ mockup, lời mời donate tùy tâm |

## Tải bộ mockup và lời mời donate (FR-32..FR-35)
- Bấm **Tải về** ở thanh menu hoặc ở `index.html` để vào `download.html`, rồi bấm nút **Tải về (.zip)** (liên kết `download/dashboard-callcenter-mockups.zip`). Nút luôn dùng được, không cần JS.
- Lời mời ủng hộ tùy tâm nằm dưới nút tải; bấm "Để sau, xin cảm ơn" để ẩn, "Xem lại lời mời" để hiện lại. Không bắt buộc, không chặn tải. Ảnh QR là ảnh nguyên bản, không chép chữ trong ảnh ra văn bản; nếu ảnh không tải sẽ hiện khung dự phòng.

### Ghi chú cho operator
1. Sao chép ảnh QR: `planning/assets/donate-qr.jpg` → `documents/design/mockups/assets/donate-qr.jpg` (tạo thư mục `assets` nếu chưa có). Chưa sao chép thì trang hiện khung dự phòng.
2. Dựng zip mỗi khi mockup đổi: Windows `powershell -File download\build-zip.ps1`, hoặc bash `sh download/build-zip.sh` (cần lệnh `zip`). Danh sách tệp bắt buộc xem `download/FILES.txt`.
3. Mở thử zip: giải nén ra thư mục mới, mở `index.html` bằng file://, kiểm nút Tải về và ảnh QR.

## Lưu ý
- Sáng/tối đổi theo cài đặt hệ điều hành (`prefers-color-scheme`). Bố cục thử ở 360, 768, 1280 px.
- JS chỉ để mở/đóng hộp thoại minh họa; các trạng thái khác xem qua neo (`#dang-tai`, `#rong`, `#loi`).
- Bàn phím: Tab, Enter; liên kết "Bỏ qua điều hướng" hiện khi Tab lần đầu.