Incomex AI Portal
KB-7FFA rev 7

Lộ trình Lắp ráp — Assembly Roadmap

4 min read Revision 7
planningassemblyroadmaptable-modulenuxt-ui

Lộ trình Lắp ráp — Assembly Roadmap

v1.1 | 2026-03-08 S107 — Cập nhật: Table Module ✅ (table_registry 16 records, DirectusTable), Registry 3-layer UI ✅, Lớp 3 Section-Based đang triển khai (S107-LAYER3). Operating Rules v4.4. LỘ TRÌNH DUY NHẤT cho việc xây dựng UI hệ thống. Mọi mission phải theo thứ tự này. search_knowledge("assembly roadmap")

Nguyên tắc

THÍCH CODE THAY VÌ LẮP RÁP = SAI. Cả vạn người đã dùng Nuxt UI, Agency OS — đồ có sẵn, chạy ổn định, nâng cấp dễ. Code custom = bugs dài hạn, không scale, không nâng cấp được.

Bước 1: ĐIỀU TRA — Đã cài gì? Cần cài gì thêm?

Trạng thái: ✅ DONE (ASSEMBLY-STEP1, 2026-03-05)

Kết quả:

  • Nuxt UI v2.22.3: 23 components đang dùng, 14 available chưa dùng (UTimeline, UStepper, UPopover, UTabs...)
  • UTable ĐÃ DÙNG 8 LẦN trong portal — nhưng Knowledge/Workflow modules dùng custom HTML
  • Agency OS = chỉ branding, không phải module/layer thực sự
  • Không cần cài thêm gì. Gap là USAGE, không phải availability.
  • Custom code cần thay: 3 tables (939 dòng), 5 popups (400 dòng), 15 form files
  • Báo cáo: knowledge/current-state/reports/assembly-step1-inventory.md

Bước 2: CÀI ĐẶT BỔ SUNG

Trạng thái: ✅ SKIP — Không cần cài thêm. Nuxt UI v2 đủ hết.

Bước 3: HOÀN THIỆN MODULE TABLE — Module nền tảng

Trạng thái: 🔄 ĐANG LÀM — PR #441 deploy, PR #442 deploy. Nhưng còn 5 vấn đề cốt tử.

Vấn đề cốt tử (S104 — phải fix trước khi sang bước khác):

  1. M-003 Table Module thiếu trong list modules → data/logic sai
  2. Bảng cũ format cũ, bảng mới format mới — KHÔNG CÓ cơ chế áp dụng đồng loạt → CI Guard chặn custom <table> + migrate hết
  3. Column header click → description chưa hoạt động → UTooltip chưa lắp vào header slot
  4. Dấu + click → popup hiện nhưng submit không lưu → proposal API chưa wire
  5. Tooltip text dấu + sai nội dung → hàng phải = "Đề xuất thêm hàng tại vị trí này với mô tả yêu cầu bằng ngôn ngữ tự nhiên", cột = "Đề xuất thêm cột tại vị trí này với mô tả yêu cầu bằng ngôn ngữ tự nhiên"

Nguyên tắc: 1 thay đổi DirectusTable = TỰ ĐỘNG áp dụng toàn bộ. Không tồn tại bảng cũ/mới song song.

Bước 4: ÁP DỤNG — Thay tất cả custom code bằng Nuxt UI + DirectusTable

Trạng thái: 📋 SAU BƯỚC 3

P1 — Custom tables → DirectusTable (3 files, ~939 dòng):

  • ProcessRegistryView.vue (389 dòng) → DirectusTable
  • current-tasks/index.vue (217 dòng) → DirectusTable
  • approval-desk/index.vue (333 dòng) → DirectusTable

P1b — Workflow pages → DirectusTable + Nuxt UI:

  • Tab Trình tự → DirectusTable (đã PR #440, verify lại)
  • Tab Tiến trình cột trái → DirectusTable compact
  • Tab Tiến trình cột phải → UTimeline hoặc UStepper (điều tra khi làm)
  • Tab Đề xuất → DirectusTable
  • Workflow tabs → UTabs (thay custom NuxtLink tabs)
  • Workflow breadcrumb → UBreadcrumb

P2 — Custom popups → Nuxt UI (5 files, ~400 dòng):

  • ProposalPopup.vue → UPopover/UModal
  • InlineWcrPopup.vue → UPopover
  • Column description → UTooltip
  • DetailPanel → USlideover
  • CreateDiscussionModal → UModal

P3 — Form elements + Polish (~15 files):

  • Raw <input> → UInput
  • Raw <select> → USelectMenu
  • Raw <textarea> → UTextarea
  • Raw <input type="checkbox"> → UCheckbox
  • Custom loading → USkeleton
  • Custom alert() → useToast()

Verify cuối:

  • grep custom <table>/<tr>/<thead> ngoài shared/ → 0 results
  • Thay đổi 1 style DirectusTable → mở 5 trang → tất cả đổi theo

Tiếp theo (sau 4 bước trên):

  • Nested checkpoints (expand step → checkpoints con) — dùng UTable expanded rows
  • Sub-process links (quy trình con trong quy trình) — dùng parent_workflow_id
  • Đa tầng view (lãnh đạo rút gọn, thực thi chi tiết) — cùng data, filter khác
  • CI Guards (TD-069) — cưỡng chế DOT duplicate + custom table

Nguyên tắc: Điều tra → Cài đặt → Xây module nền tảng → Áp dụng. Không bao giờ ngược lại.