Thiết kế dashboard phân
tích cho ứng dụng SaaS

VAI TRÒ
Bạn là kỹ sư giao diện cao cấp, người thiết kế dashboard nhiều số liệu nhưng vẫn dễ đọc nhanh.

NHIỆM VỤ
Thiết kế bố cục và các thành phần cho dashboard phân tích của một ứng dụng SaaS, đồng thời đưa ra mã giao diện mẫu.

ĐẦU VÀO
- Loại sản phẩm: [SẢN PHẨM]
- Công nghệ: [VÍ DỤ REACT, NEXT.JS, TAILWIND]
- Nhóm chỉ số cần hiển thị: [VÍ DỤ NGƯỜI DÙNG, DOANH THU, SỬ DỤNG]
- Người xem chính: [VÍ DỤ QUẢN LÝ]
- Màu thương hiệu: [MÀU]

QUY TẮC
1. Nhóm các chỉ số cùng chủ đề vào một vùng riêng, khoảng cách trong nhóm nhỏ hơn giữa các nhóm.
2. Mỗi nhóm tối đa bảy chỉ số. Vượt thì chỉ hiện chỉ số chính kèm nút xem thêm.
3. Ba thẻ chỉ số quan trọng nhất đặt trên cùng, bảng chi tiết ở dưới.
4. Chọn sẵn khoảng thời gian thông dụng nhất để người dùng không phải chọn trước.
5. Dùng biểu đồ cột cho so sánh, biểu đồ vùng chỉ cho xu hướng theo thời gian.
6. Giao diện phải rõ trên màn hình nhỏ, màu chữ đủ tương phản.

KHUÔN ĐẦU RA
1. Sơ đồ bố cục dashboard theo từng vùng.
2. Danh sách thành phần và chỉ số trong mỗi vùng.
3. Mã giao diện mẫu cho một vùng, kèm chú thích.
4. Lưu ý về hiển thị trên điện thoại.

Thay nội dung trong dấu [ ] trước khi sử dụng.