MOUT Builder v3 — Ghi chú thiết kế (vòng 3)

Date: 2026-06-18 | Status: DISCUSSION + PREVIEW | Tiếp mout-builder-v2-notes.md. Preview: https://vps.incomexsaigoncorp.vn/ui-preview/mcp-writes/mout-builder-v3.html Source: /opt/incomex/docs/mcp-writes/ui-preview/mout-builder-v3.html

1. Huyên yêu cầu (vòng 3) — đã làm hết

1. Bút sửa tên báo cáo: thêm nút ✎ cạnh tiêu đề; "sửa lại" đôi khi chỉ là đổi tên; đúc/slug luôn theo tên mới nhất.
2. Reorder kiểu MOW, không tạo concept mới: bỏ mũi tên ↑↓. Dùng handle 6 chấm (nắm kéo) + nhãn hiện/ẩn. Bấm-giữ kéo để đổi vị trí. Dễ đào tạo vì giống MOW.
3. 7 tầng lọc đồng bộ MOW: thay 3 facet bằng 7 select cascade đúng tên & thứ tự MOW.
4. Bối cảnh (Huyên lưu ý): báo cáo mặc định lưu lại trên hệ thống, sau đó email tự động / MOT tự gửi tới người cần thực hiện → đã đưa vào cast + JSON khuôn.

2. 7 TẦNG MOW (trích từ source MOW v2, verbatim) — DÙNG LÀM CHUẨN

const TIERS=['T7','T6','T5','T4','T3','T2','T1'];
TLABEL={T7:'Lĩnh vực',T6:'Công ty',T5:'Khối',T4:'Phòng ban',T3:'Chuyên môn',T2:'Nhiệm vụ',T1:'Công việc'};

Thứ tự rộng→hẹp: Lĩnh vực → Công ty → Khối → Phòng ban → Chuyên môn → Nhiệm vụ → Công việc. Lưu ý: có "Khối" giữa Công ty và Phòng ban (trước đây đoán thiếu). Đáy KHÔNG phải "Task/Field" mà là "Công việc"; field là leaf nằm dưới. → Mọi picker trường (cột / lọc / trường ngày) trong MOUT phải drill-down đúng 7 tầng này để nhất quán trải nghiệm với MOW.

3. Reorder MOW (trích verbatim) — visual chuẩn

• Handle = SVG 6 chấm tròn (2 cột × 3 hàng), màu #9ca3af, opacity .5→.9→1, cursor grab→grabbing.
• Trạng thái: .dragging{opacity:.4} · .drag-over{background:#eaf3de;outline:2px dashed #639922} · .moved đánh dấu hàng đã đổi.
• QUAN TRỌNG: trong MOW v2 mới có visual, CHƯA gắn event kéo-thả thật (grep dragstart/drop = 0). → MOUT v3 đã hiện thực drag-drop thật theo đúng visual đó (HTML5 DnD: dragstart/dragover/drop, reorder M.cols.splice). Khi làm MOW production nên port logic này ngược lại để MOW kéo được thật.

4. Quyết định kiến trúc vòng 3

• Một picker, 7 tầng cascade: chọn tầng trên → tầng dưới tự lọc options; + search. Verified: Khối "Vận hành" → Phòng ban {Kho, QC, Bảo trì}.
• Tier mapping demo: T7 lĩnh vực, T6 công ty, T5 khối (map phòng ban→khối: Vận hành/Kinh doanh/Tài chính/Hỗ trợ), T4 phòng ban, T3 chuyên môn (map theo entity), T2 nhiệm vụ (=entity), T1 công việc (thao tác của entity). Thực tế tier lấy từ cây MOW thật.
• Cột: handle kéo + hiện/ẩn + Σ (chỉ cột số) + bỏ cột. Bỏ ↑↓.
• Đúc → lưu + phân phối: output:{ url, saved:true, distribute:['email_auto','MOT'], export:['xlsx','csv'] }. Cast box báo "đã lưu hệ thống; email tự động + MOT gửi tới người cần thực hiện".
• Slug bỏ dấu tiếng Việt (verified rpt_ton_kho_cuoi_ky_da_nang).

5. Verified

Kho demo 438 trường (đại diện ~2.000); cascade 7 tầng; drag reorder (splice from→to); slug; thời gian 16→28 = 16/06→28/06/2026; CSV/.xls tải thật.

6. Open items vòng sau

1. Port drag-drop thật ngược về MOW (MOW hiện chưa kéo được).
2. Tier mapping thật lấy từ cây MOW production (T5 Khối, T3 Chuyên môn, T1 Công việc) thay map demo.
3. field_registry gắn tier + type + agg + operator hợp lệ.
4. Lưu báo cáo: bảng report_registry (khuôn) + nơi lưu bản đúc (materialized/cache) + bản ghi lịch sử chạy.
5. Phân phối: nối email tự động + MOT (tạo task "xem báo cáo" cho người nhận) — ai là người nhận lấy theo tier/role.
6. Quyền: cột nhạy cảm (lương…) lọc theo role ở backend.
7. Export .xlsx thật server-side (giữ format tiền/ngày) thay .xls HTML.
8. Sau khi MOUT chốt → nhân engine sang MOIT (Grid nhập 2 chiều) + MOUT-Pivot (cột động).

Ghi chú vòng 3 — chờ Huyên phản hồi preview v3.