Bộ mockup Dashboard Call Center
Tải về bộ mockup (.zip) Miễn phí, dùng làm mẫu cho dự án của bạn. Truy vết: FR-32.
Mở trực tiếp các tệp .html trong trình duyệt (file://). Dữ liệu là dữ liệu mẫu bịa. Đổi sáng/tối theo cài đặt hệ điều hành. Kiểm bằng bàn phím: Tab, Enter; liên kết bỏ qua điều hướng hiện khi Tab lần đầu.
Màn hình đã có
- Dashboard KPI và biểu đồ
4 thẻ KPI có sparkline, xu hướng, donut, heatmap, gauge SLA, phễu, cột và xếp hạng nhân viên (bản làm lại T-024). Truy vết: FR-06–FR-11, FR-VIS.
- Dashboard – đang tải, rỗng, lỗi
- Thư viện thành phần
Thẻ chỉ số, nút, thẻ trạng thái, bộ lọc, bảng, thông báo, rỗng/đang tải. Truy vết: FR-01–FR-05.
- Thư viện biểu đồ SVG (1/2 và 2/2)
Đường, vùng chồng, cột nhóm/chồng, cột ngang, donut/pie, so sánh kỳ trước, gauge/bullet SLA, heatmap, phễu, histogram, sparkline, radar, thanh tiến độ mục tiêu, cột + đường; mỗi biểu đồ có bảng dữ liệu thay thế. Truy vết: FR-VIS (CR-T-017). Hướng dẫn tùy biến khi có dữ liệu thật (
design-chart-customization.md; công thức, token, ví dụ số cho 16 mục). - Cuộc gọi – bảng và bộ lọc
Bảng, sắp xếp, phân trang, tìm kiếm, 3 bộ lọc, chip. Truy vết: FR-12–FR-20.
- Cuộc gọi – đang tải, rỗng, không tìm thấy, lỗi, lỗi ngày
Các bản: đang tải, rỗng, lỗi tải, lỗi bộ lọc. Truy vết: FR-15, FR-16, FR-17.
- Khách hàng – vai Nhân viên (số che)
20 khách, nút Gọi, hộp xác nhận, nút xám khi ngoài phạm vi. Bản vai Quản lý: customers-manager.html. Truy vết: FR-21, FR-23, FR-28.
- Softphone – 9 trạng thái và ghi chú sau cuộc gọi
Sẵn sàng, đang kết nối, đổ chuông, đang nói, giữ máy, kết thúc, nhỡ, lỗi micro, lỗi tổng đài; form ghi chú (bình thường và lỗi kiểm tra). Truy vết: FR-24, FR-25, FR-26.
- Chi tiết khách (KH013) – vai Nhân viên
Nút gọi nổi bật, lịch sử cuộc gọi của mình, bản rỗng/đang tải/lỗi. Bản vai Quản lý: customer-detail-manager.html (6 cuộc, 3 trạng thái). Truy vết: FR-22, FR-27, FR-28.
- Tải về bộ mockup và lời mời ủng hộ
Nút tải .zip, lời mời donate tùy tâm (đóng được), ảnh QR, khung dự phòng. Truy vết: FR-32–FR-35.
Lối tắt: Thư viện biểu đồ
Tài liệu thiết kế liên quan
design-system.md– token, thành phần dùng chungdesign-dashboard.mdvàdesign-dashboard-v2.md– dashboarddesign-table-filters.md– bảng và bộ lọcdesign-call-entry.mdvàdesign-softphone.md– gọi và softphonedesign-chart-customization.md– tùy biến biểu đồdesign-visual-refresh.mdvàdesign-ux-improvements.md– cải tiến UX/UI, truy cậpdesign-api-contract.mdvàdesign-telephony-integration.md– đề xuất API, tích hợp tổng đài (chỉ tài liệu)
Các tệp .md trên nằm ngoài gói mockup; xem trong kho tài liệu thiết kế của dự án.
Hướng dẫn xem
Đây là mockup tĩnh với dữ liệu mẫu bịa, không gọi API, không cần máy chủ, không dùng CDN hay thư viện ngoài. Xem đầy đủ trong HUONG-DAN.md.