Tab: Báo cáo (screen-baocao)
File:app.jslines 2501-2902,index.htmllines 407-496
Style: Dark theme
1. Tổng quan
Màn hình báo cáo với 5 sub-tab, dark theme. Cho phép xem theo tháng hoặc tuần.
📊 Báo cáo Thống kê 6S
Tổng quan, Pareto, Xu hướng, Khu vực, Hiệu suất
[📊 Chọn kỳ báo cáo ▼] [Tháng | Tuần] [📥 Xuất Excel]
┌─────────────────────────────────────────────────────────────┐
│ [📊 Tổng quan] [📈 Pareto S1-S6] [📉 Xu hướng] [🏢 Khu vực] [👤 Hiệu suất] │
└─────────────────────────────────────────────────────────────┘
2. Bộ lọc chung
Select kỳ báo cáo (#reportMonth)
- Mode Tháng: 12 tháng gần nhất
- Mode Tuần: 12 tuần gần nhất
- Khi đổi → tự động render lại báo cáo
Button group Tháng/Tuần
| Button | ID | Hành vi |
|---|---|---|
| Tháng | btnGroupMonth | setReportGroup('month') |
| Tuần | btnGroupWeek | setReportGroup('week') |
Nút Export Excel
exportReportExcel() → dùng thư viện XLSX → tải file BaoCao_6S_{period}.xlsx
Cấu trúc Excel:
| Mã thẻ | Loại | S-category | Vị trí | Mô tả | Khắc phục | Người treo | Người XL | Trạng thái | Ngày tạo | Hạn XL |
|---|
3. Sub-tab 1: Tổng quan (rpt-overview)
Stats Cards (4 cards)
┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ Tổng thẻ │ │ Rút OK │ │ Quá hạn │ │ Rút NG │
│ 42 │ │ 28 │ │ 5 │ │ 3 │
│ │ │ 67% │ │ │ │ │
└─────────┘ └─────────┘ └─────────┘ └─────────┘
Donut Chart — Trạng thái thẻ
- Canvas
#chartDonut(360x240) - 4 segments: Rút OK (xanh), Đang xử lý (xanh dương), Quá hạn (đỏ nhạt), Rút NG (đỏ đậm)
- Tâm: % hoàn thành (số to) + "Hoàn thành"
- Legend phía dưới
Bảng thống kê (#overviewTable)
| Chỉ tiêu | Số lượng |
|---|---|
| 🟡 Thẻ Vàng | X |
| 🔴 Thẻ Đỏ | X |
| 🔧 Đang xử lý | X |
| 🚨 Quá hạn | X |
| ✅ Rút OK | X |
| ❌ Rút NG | X |
4. Sub-tab 2: Pareto S1-S6 (rpt-pareto)
Pareto Chart — Canvas #chartPareto (400x240)
Hiển thị:
- Bar chart: S1-S6 sắp xếp giảm dần, mỗi bar có gradient màu
- Line cộng dồn: Đường màu hồng
#f472b6thể hiện % tích lũy - Mỗi bar có nhãn số + % cộng dồn
Bảng dữ liệu (#reportTable)
| Phân loại | Số lượng | Tỷ lệ | Cộng dồn |
|---|---|---|---|
| S2 | 15 | 35.7% | 35.7% |
| S3 | 10 | 23.8% | 59.5% |
| ... | ... | ... | ... |
5. Sub-tab 3: Xu hướng (rpt-trend)
Trend Chart — Canvas #chartTrend (800x240)
Dữ liệu: Theo tháng (6 kỳ) hoặc tuần (12 kỳ)
- 🔵 Line Treo thẻ (xanh dương): Số thẻ tạo mới
- Điểm tròn có glow shadow
- 🟢 Line Rút thẻ (xanh lá): Số thẻ đã hoàn tất + rejected
- Điểm tròn có glow shadow
- Grid lines mờ
rgba(255,255,255,.06)
Bảng tóm tắt xu hướng (#trendSummary)
| Chỉ tiêu | Thực tế | Xu hướng |
|---|---|---|
| 🔵 Treo thẻ | 12 | 📈 +20% |
| 🟢 Rút thẻ | 8 | 📉 -10% |
| 📊 Chênh lệch | +4 | ⚠️ Tồn tăng |
6. Sub-tab 4: Khu vực (rpt-location)
Top 10 khu vực có nhiều thẻ nhất.
Bảng (#locationReport)
| # | Khu vực | Tổng | Rút OK | Rút NG | Quá hạn |
|---|---|---|---|---|---|
| 1 | Chuyền 1 | 15 | 10 | 2 | 3 |
| 2 | Chuyền 2 | 12 | 8 | 1 | 1 |
Horizontal bar chart
Chuyền 1 ████████████████████████░░ 15
Chuyền 2 ████████████████████░░░░░░ 12
VPNS ██████████░░░░░░░░░░░░░░░░ 5
7. Sub-tab 5: Hiệu suất (rpt-perf)
Báo cáo hiệu suất theo người.
Bảng (#perfReport)
| # | Người | Task | ✅ | ❌ | TB ngày | S1 | S2 | S3 | S4 | S5 | S6 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 1 | Nguyễn Văn A | 20 | 15 | 2 | 3.5 | 5 | 3 | 4 | 2 | 1 | 5 |
| 2 | Trần Văn B | 15 | 12 | 1 | 4.2 | 3 | 4 | 2 | 3 | 1 | 2 |
Horizontal bar chart theo người
Nguyễn Văn A ████████████████████████░░░░ 20
Trần Văn B ██████████████████████░░░░░░ 15
...
8. Các hàm xử lý
| Hàm | Mô tả |
|---|---|
renderReport() | Entry point: populate select + gọi tab tương ứng |
switchReportTab(tab) | Chuyển sub-tab |
setReportGroup(mode) | Đổi mode tháng/tuần |
getMonthTags() | Lọc tags theo kỳ báo cáo đã chọn |
renderOverview() | Render stats + donut + table |
renderPareto() | Render Pareto bar + line + data table |
renderTrend() | Render trend line chart + summary |
renderLocationReport() | Render top 10 locations |
renderPerfReport() | Render performance table |
getWeekNumber(d) | Tính số tuần trong năm |
exportReportExcel() | Xuất Excel |
Audio thuyết minh
audio/08-bao-cao.mp3Click play để nghe hướng dẫn bằng giọng đọc.
Screenshots
Chú thích: Màn hình báo cáo dark theme với stats cards + biểu đồ donut
Chú thích: Biểu đồ Pareto cột + đường cộng dồn phân loại S1-S6
Chú thích: Biểu đồ xu hướng Treo/Rút thẻ theo tháng/tuần
Chú thích: 4 thống kê: Tồn (đỏ), Quá hạn (cam), Mới (xanh dương), Hoàn tất (xanh lá)
Chú thích: Donut Chart tỷ lệ các trạng thái thẻ: Mới, Đang XL, Hoàn tất, Quá hạn
Chú thích: Sub-tab Khu vực (🏢) hiển thị thống kê treo/rút thẻ theo từng địa điểm
Chú thích: Sub-tab Hiệu suất (👤) hiển thị KPI theo nhân sự: số thẻ, tỷ lệ đạt deadline
Chú thích: File Excel tải xuống từ nút 📥 Xuất Excel
<!-- Ảnh chưa chụp: Overview table, Trend summary, Top 10, Filter period -->