Delivery Index — Cải thiện UX cài đặt Mã Công Việc / Tiền Tour

Field	Value
Feature	Cải thiện UX cài đặt Mã Công Việc / Tiền Tour
Version	1.0
Date	2026-03-26
Profile	M (Medium)
Quality Bar	✅ 20/20 (M profile)

---

Files

#	File	Path	Audience
1	PRD	docs/features/settings-ux-subtask-tag/prd.md	PO, Tech Lead, all
2	UI Spec	docs/features/settings-ux-subtask-tag/ui-spec.md	UI/UX Designer, Frontend Dev
3	Dev Spec	docs/features/settings-ux-subtask-tag/dev-spec.md	Frontend Dev
4	QA Test Plan	docs/features/settings-ux-subtask-tag/qa-test-plan.md	QA
5	Design Doc (reference)	docs/superpowers/specs/2026-03-26-settings-ux-subtask-tag-design.md	Tech Lead (deep context)
6	Handoff (this file)	docs/features/settings-ux-subtask-tag/handoff.md	All

---

Timeline

Milestone	Target	Owner	Dependency
M1: GraphQL fragment mở rộng + codegen	T+1d	FE Dev	—
M2: TaskTagSelect enriched (chip + dropdown + tooltip)	T+3d	FE Dev	M1
M3: Trang Cấu Hình Tiền Tour (accordion + CRUD)	T+7d	FE Dev	M1
M4: SubTaskTable cải thiện (cột tag + filter + fix label)	T+8d	FE Dev	M1
M5: Blast radius ecommerce display	T+9d	FE Dev	M2
M6: Rename + route redirects	T+9d	FE Dev	M3
M7: QA testing	T+11d	QA	M2-M6

Critical path: M1 → M2 → M3 → M6 → M7

Parallel work: M4 và M5 có thể làm song song với M3 (cùng depend M1/M2, không depend nhau).

---

RACI

Deliverable	PO/BA	FE Dev	QA	UI/UX
GraphQL fragments	I	R/A	I	—
TaskTagSelect enriched	I	R/A	C	C
Trang Cấu Hình Tiền Tour	I	R/A	C	C
SubTaskTable cải thiện	I	R/A	C	—
Blast radius ecommerce	I	R/A	C	—
Rename + redirects	I	R/A	C	—
QA testing	C	C	R/A	—

---

Open Items

ID	Item	Owner	Deadline	Status
AI-01	UI Designer review wireframes (accordion layout, enriched chip)	UI/UX Designer	T+3d	Open
AI-02	QA review test plan + confirm seed data	QA Lead	T+3d	Open

---

Day 0 Verification (Dev chạy trước khi code)

Frontend Dev

• [ ] pnpm codegen pass (không có type errors)
• [ ] Verify các file sẽ sửa không có conflict:
  • src/modules/settings/components/task-tag/TaskTagSelect.tsx — 281 lines
  • src/modules/settings/components/task-tag/TaskTagDisplay.tsx — 63 lines
  • src/modules/settings/components/subtask/SubTaskForm.tsx — 209 lines
  • src/modules/settings/components/subtask/SubTaskTable.tsx — 507 lines
  • src/modules/settings/module.ts — route config
  • src/modules/settings/graphql/task-tag.graphql
  • src/modules/settings/graphql/subtask.graphql
• [ ] Verify blast radius files:
  • src/modules/ecommerce/components/order/OrderForm/OrderTaskLimitForm.tsx
  • src/modules/ecommerce/components/service/ServiceForm/ServiceSubtaskItem.tsx
  • src/modules/projects/components/TaskForm/index.tsx — verify line 2108-2131
• [ ] Verify TaskTagForm.tsx vẫn tồn tại (reuse trong trang mới)

QA

• [ ] Test accounts sẵn sàng: IT Leader, IT Staff, Admin, Manager, Staff (KTV)
• [ ] Test data verify:
  • Ít nhất 2 nhóm tiền tour active
  • Ít nhất 5 tags có tour_moneys config
  • Ít nhất 1 tag flat-rate + 1 tag multi-rate
  • Ít nhất 10 subtask configs có tags gán

All

• [ ] Đọc PRD section A2 "Tổng quan dễ hiểu" trước khi bắt đầu
• [ ] Đọc design doc nếu cần deep context

---

Dev Task Checklist (từ dev-spec C11)

Foundation (T1-T2: ~0.75d)

• [ ] T1 (0.5d): Mở rộng GraphQL fragments (task-tag + subtask) + pnpm codegen
• [ ] T2 (0.25d): Utility function computeTourFeeRange() + computeTourFeeDetail()

Core — TaskTagSelect Enriched (T3-T4: ~1.5d)

• [ ] T3 (1d): TaskTagSelect enriched: chip format + dropdown option format
• [ ] T4 (0.5d): TaskTagSelect tooltip: hover chip → bảng tiền tour + link

Core — Trang Cấu Hình Tiền Tour (T5-T9: ~4d)

• [ ] T5 (0.5d): TourFeeConfig page + route + sidebar
• [ ] T6 (1.5d): TourFeeGroupAccordion (expand/collapse, search, add group)
• [ ] T7 (1d): TourFeeTagTable (bảng tags + range + chi tiết + status + actions)
• [ ] T8 (0.5d): TourFeeUsageExpand (lazy query + expand/collapse)
• [ ] T9 (0.5d): Reuse TaskTagForm trong TourFeeConfig (side dialog)

Support — SubTaskTable + Rename (T10-T12: ~1.1d)

• [ ] T10 (0.5d): SubTaskTable thêm cột "Tag tiền tour"
• [ ] T11 (0.5d): SubTaskTable thêm filter nhóm/tag + fix label swap
• [ ] T12 (0.1d): SubTaskForm rename labels

Blast Radius (T13-T15: ~0.75d)

• [ ] T13 (0.25d): OrderTaskLimitForm sửa tag display format
• [ ] T14 (0.25d): ServiceSubtaskItem sửa tag display format
• [ ] T15 (0.25d): TaskTagDisplay enriched format

Finalize (T16-T18: ~1.85d)

• [ ] T16 (0.25d): Route redirects + route name mapping
• [ ] T17 (0.1d): Sidebar rename (module.ts)
• [ ] T18 (1.5d): Testing + fix + responsive

Tổng: ~10.85d

---

Acceptance Criteria (Final sign-off)

#	Criteria	Verify by
1	Trang Cấu Hình Tiền Tour hoạt động: accordion, CRUD tag/group	QA (TC-FR-001)
2	Range + Chi tiết tiền tour hiện đúng (flat/multi/empty)	QA (TC-FR-002)
3	"Đang dùng bởi N mã công việc" count + expand đúng	QA (TC-FR-003)
4	Tag chip enriched [Mã — Range] ở tất cả 5 nơi	QA (TC-FR-004 + TC-BR)
5	Tooltip hiện bảng tiền tour 5 cấp + link chi tiết	QA (TC-FR-005)
6	Dropdown search hiện Mã + Tên + Range + Nhóm	QA (TC-FR-006)
7	SubTaskTable có cột tag + filter nhóm/tag + fix label	QA (TC-FR-007)
8	Sidebar rename + route redirects + route name mapping	QA (TC-FR-008)
9	Blast radius: TaskForm + OrderForm + ServiceForm hiển thị đúng	QA (TC-BR-001→003)
10	Tiền tour auto-fill trong TaskForm KHÔNG bị ảnh hưởng	QA (verify trên subtask có tag + assignee)
11	Performance: page load < 1s, SubTaskTable < 500ms	QA (TC-NFR-001, 002)

---

Không ảnh hưởng (reassurance cho team)

• Tiền tour calculation flow: ZERO coupling — event triggers (Go code) chạy server-side, đọc DB trực tiếp
• Lương / Commission: ZERO coupling — salary dùng snapshot ecommerce_task_log.tour_fee
• Database schema: ZERO thay đổi
• Hasura metadata / permissions: ZERO thay đổi
• Backend Go services: ZERO thay đổi
• Trang cài đặt khác: ZERO ảnh hưởng