Tab: Danh sách (screen-ds)
File:app.jslines 1055-1387,index.htmllines 365-405
1. Tổng quan
Màn hình hiển thị toàn bộ thẻ 6S dưới dạng Kanban board, với location drawers để lọc nhanh theo khu vực.
CODE
📋 Danh sách Thẻ 6S
[🔍 Tìm mã thẻ, mô tả...] [S: Tất cả ▼] [📅 Thời gian: Tất cả ▼] [✕]
📁 Xưởng May 2 / C1 - Chuyền 1 [🟡 3] [🔴 1] [📦 4] [🔍 Tự DG] ▼
┌─────────┬─────────┬─────────┬──────────┬──────────┬──────────┐
│ 🚨 Quá hạn │ 🆕 Mới │ ⏳ Chờ │ 🔧 Đang │ ❌ NG │ ✅ OK │
│ 1 │ 2 │ 3 │ 1 │ 1 │ 5 │
└─────────┴─────────┴─────────┴──────────┴──────────┴──────────┘
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
🚨 Quá hạn 1 ▼
┌─────────────────────────────────────────────────────┐
│ R-2026-00001 🚨 [🔧 Xử lý] │
│ Máy mở túi bị rung lắc mạnh │
│ 🚨 🔴 S6 👤 Nguyễn Văn A │
└─────────────────────────────────────────────────────┘
🆕 Mới treo 2 ▼
┌─────────────────────────────────────────────────────┐
│ Y-2026-00002 │
│ Vật tư để không đúng nơi quy định │
│ 🆕 🟡 S2 👤 Trần Văn B │
└─────────────────────────────────────────────────────┘
...
2. Bộ lọc (Filters)
2.1 Thanh tìm kiếm & filter trên cùng
| Element | ID | Mô tả |
|---|---|---|
| Tìm kiếm | kSearch | Tìm theo mã thẻ hoặc mô tả (debounce 250ms) |
| S-Category | kSFilter | S1-S6 |
| Thời gian | kDateFilter | Hôm nay, Tuần này, Tháng này, Quá hạn |
| Xóa filter | ✕ | clearAllFilters() |
2.2 Filter chính
| Element | ID | Mô tả |
|---|---|---|
| Select loại | filterType | Tất cả / Thẻ Vàng / Thẻ Đỏ |
| Nút Refresh | — | renderList() |
2.3 Filter từ Dashboard
Click vào các KPI compact trên dashboard header:
- 🚨 Quá hạn → filterTo('alarm')
- 🆕 Mới → filterTo('new')
- ⏳ Chờ → filterTo('pending')
- 🔧 Đang → filterTo('processing')
- ❌ NG → filterTo('ng')
- ✅ OK → filterTo('done')
3. Location Drawers
Cấu trúc
CODE
📁 Xưởng May 2 / C1 - Chuyền 1 [🟡 3] [🔴 1] [📦 4] [🔍 Tự DG] ▼
┌──────────┬──────┬──────┬──────┐
│ Trạng thái│ Vàng│ Đỏ │ Tổng │
├──────────┼──────┼──────┼──────┤
│ 🚨 Quá hạn│ 1 │ 0 │ 1 │ ← click → lọc theo trạng thái này
│ 🆕 Mới │ 2 │ 0 │ 2 │
│ ⏳ Chờ XL│ 2 │ 1 │ 3 │
│ 🔧 Đang XL│ 0 │ 1 │ 1 │
│ ❌ Ko đạt│ 1 │ 0 │ 1 │
│ ✅ Hoàn tất│ 5 │ 0 │ 5 │
└──────────┴──────┴──────┴──────┘
Hành động:
- Click vào hàng trạng thái → lọc kanban theo (location + state)
- Click 🔍 Tự DG → chuyển tab Đánh giá + chọn location đó
- Click ▼ → expand/collapse drawer
Các hàm
| Hàm | Mô tả |
|---|---|
renderLocationDrawers(allTags) | Render toàn bộ drawers |
toggleLocDrawer(headerEl) | Toggle expand/collapse |
filterKanbanByLoc(locId, stateKey, stateLabel) | Lọc kanban theo location + state |
clearLocFilter() | Xóa location filter |
4. Kanban Columns
6 cột Kanban, mỗi cột có thể collapse/expand:
| Column | ID | Màu | Filter key |
|---|---|---|---|
| 🚨 Quá hạn | kanban-alarm | #d32f2f | alarm |
| 🆕 Mới treo | kanban-new | #1565c0 | new |
| ⏳ Chờ XL | kanban-pending | #e65100 | pending |
| 🔧 Đang XL | kanban-processing | #f9a825 | processing |
| ❌ Không đạt | kanban-ng | #c62828 | ng |
| ✅ Hoàn tất | kanban-done | #2e7d32 | done |
Cột tự động ẩn nếu không có item và không được filter chọn.
Kanban Card
Mỗi thẻ hiển thị:
CODE
┌─────────────────────────────────────────────────────┐
│ Y-2026-00002 🚨 [🔧 Xử lý] │ ← nếu chưa hoàn tất
│ Vật tư để không đúng nơi quy định │ ← mô tả (80 ký tự max)
│ 🆕 🟡 S2 👤 Trần Văn B │ ← badge + loại + S + người
└─────────────────────────────────────────────────────┘
Card click → mở chi tiết thẻ (openCardDetail)
5. Các hàm xử lý
| Hàm | Mô tả |
|---|---|
renderList(filter) | Render toàn bộ danh sách + kanban |
loadAllTags() | Load tags từ server + local, merge theo mã thẻ |
loadLocalTags() | Load từ localStorage('6s_tags') |
saveTags() | Lưu tags xuống localStorage + update dashboard count |
updateDashboardCount() | Cập nhật số liệu trên dashboard header |
debounceFilter() | Debounce filter 250ms |
clearAllFilters() | Xóa toàn bộ filter |
getStatusBadge(t) | Trả về { label, color, icon } theo trạng thái thẻ |
Trạng thái thẻ (status functions)
| Hàm | Điều kiện |
|---|---|
isTagCompleted(t) | status='completed' hoặc eval_result='completed'/'ok' |
isTagRejected(t) | status='rejected' hoặc eval_result='rejected'/'ng' |
isTagOverdue(t) | past due_date, hoặc quá 7 ngày (Vàng) / 1 ngày (Đỏ) |
isTagNew(t) | status='new'/'open', không overdue, không completed |
isTagWaiting(t) | status='waiting'/'assigned'/'waiting_approve'/'waiting_evaluation' |
isTagProcessing(t) | status='in_progress'/'processing' |
Audio thuyết minh
Nghe hướng dẫnĐường dẫn minh họa:
audio/06-kanban.mp3Click play để nghe hướng dẫn bằng giọng đọc.
Screenshots
Tổng quan Kanban BoardĐường dẫn minh họa:
images/danhsach/kanban-overview.pngChú thích: Toàn bộ màn hình danh sách thẻ dạng Kanban với các cột trạng thái
Location DrawersĐường dẫn minh họa:
images/danhsach/kanban-location-drawers.pngChú thích: Location Drawers hiển thị thống kê thẻ theo khu vực
Mở rộng Drawer chi tiếtĐường dẫn minh họa:
images/danhsach/kanban-drawer-expanded.pngChú thích: Drawer mở rộng hiển thị bảng thống kê theo trạng thái
Thanh tìm kiếm và filterĐường dẫn minh họa:
images/danhsach/kanban-filters.pngChú thích: Bộ lọc tìm kiếm, S-Category, thời gian phía trên
Thẻ trong cột KanbanĐường dẫn minh họa:
images/danhsach/kanban-card.pngChú thích: Card hiển thị mã thẻ, mô tả, badge trạng thái, loại S
Thẻ Quá hạn (Overdue)Đường dẫn minh họa:
images/danhsach/kanban-overdue-card.pngChú thích: Card thẻ quá hạn với badge màu đỏ và nút "Xử lý"
Khi click KPI từ Dashboard headerĐường dẫn minh họa:
images/danhsach/kanban-filter-from-kpi.pngChú thích: Khi click KPI "Quá hạn" trên header → tự động filter kanban