Appearance
UI Spec — Redesign Tab Tư vấn (Commission -> Advisory Fee)
Version: 1.0 Date: 2026-03-23 PRD Ref: docs/features/redesign-tab-tu-van/prd.md
Changelog
| Version | Date | Author | Thay đổi |
|---|---|---|---|
| 1.0 | 23/03/2026 | PO/BA | Initial — UI Spec cho redesign tab Tư vấn |
| 1.1 | 07/04/2026 | PO/BA | Loại bỏ trạng thái "Chờ duyệt" — commission tự động vào wallet khi TT, không có bước duyệt |
| 1.2 | 28/04/2026 | PO/BA | Bổ sung B0 As-Is UI Inventory + Delta Contract; khóa customer commission / affiliate / referral / người giới thiệu là KEEP theo PRD out-of-scope, không được remove vì thiếu trong target wireframe |
B0) As-Is UI Inventory + Delta Contract
Scope authority: UI spec là tài liệu diễn giải từ PRD, không phải nguồn quyết định remove scope. Nếu một block UI hiện hữu không xuất hiện trong target wireframe thì mặc định là UI spec gap, không phải expected removal. Removal rule: mọi
REMOVE/HIDEphải có Decision Log hoặc FR/AC ghi rõ. PRD hiện tại chỉ redesign phần employee advisory/commission;customer commission (affiliate/referral)là out-of-scope và phải giữ logic cũ.
B0.1) Baseline hiện tại phải được account
| UI ID | Màn / route | Vị trí hiện tại | Block / field / action hiện tại | Behavior / data hiện tại | Visibility / permission hiện tại | Delta Status | Target behavior | Evidence |
|---|---|---|---|---|---|---|---|---|
SCR-01-TAB-01 | Tab trong chi tiết đơn hàng | Tab bar | Tab Hoa hồng | User mở tab để xem/cấu hình commission của đơn | Theo quyền xem tab hiện tại | UPDATE | Đổi label thành Tư vấn, route giữ nguyên | PRD FR-007, DEC-004 |
SCR-01-BLK-01 | Tab Hoa hồng/Tư vấn | Khu vực transaction hiện tại | Bảng Mã thanh toán nested expandable | Group theo invoiceCode x userId, expand ra chi tiết giao dịch | Theo quyền xem tab hiện tại | UPDATE | Chuyển thành Flat Transaction List, group header luôn hiện | PRD A2 As-Is, FR-004a/b/c, DEC-003 |
SCR-01-BLK-02 | Tab Hoa hồng/Tư vấn | Khu vực thông tin hoa hồng hiện tại | Bảng Thông tin hoa hồng NV x Dịch vụ | Hiển thị cấu hình/thực nhận theo NV và dịch vụ | Theo quyền xem tab hiện tại | UPDATE | Chuyển thành Summary Cards per NV, expand chi tiết dịch vụ | PRD A2 As-Is, FR-002 |
SCR-01-BTN-01 | Tab Hoa hồng/Tư vấn | Header section | Thêm người nhận HH / Cấu hình hoa hồng | Mở dialog cấu hình commission hiện tại | canEditCommission hiện tại | UPDATE | Đổi copy thành Cấu hình tư vấn, dialog và permission giữ nguyên | PRD FR-007, FR-008 |
SCR-01-BLK-03 | Tab Hoa hồng/Tư vấn | Khu vực customer commission nếu đơn có dữ liệu affiliate/referral | Customer commission / affiliate / referral / người giới thiệu | Logic customer commission/referral hiện tại | Theo quyền và điều kiện hiện tại | KEEP | Giữ nguyên, không redesign, không remove trong phase này | PRD Backlog Phase 2; PRD Non-goals |
SCR-01-BLK-04 | Tab Hoa hồng/Tư vấn | Notification/copy phát sinh ngoài màn | Notification template có chữ hoa hồng | Template notification hiện tại | Theo hệ thống notification hiện tại | KEEP | Không đổi trong phase này; tách task riêng | PRD DEC-007, Backlog Phase 2 |
B0.2) QA / UIUX rule
- UI/UX phải thiết kế target dựa trên baseline trên; phần
KEEPvẫn phải được thể hiện trong wireframe hoặc ghi rõ vị trí giữ nguyên. - QA không được confirm bỏ
người giới thiệu/affiliate/referralchỉ vì không thấy trong target wireframe. - Nếu muốn bỏ/ẩn customer commission/referral khỏi tab Tư vấn, cần PO decision mới và update PRD trước.
Out-of-scopetrong PRD hiện tại có nghĩa là không redesign, giữ logic cũ, không phải remove.
B1) Screen Map
Cả 2 SCR nằm trên cùng 1 page (tab Tư vấn trong chi tiết đơn hàng). SCR-01 là phần trên, SCR-02 là phần dưới.
| SCR | Tên | Route | Mô tả |
|---|---|---|---|
| SCR-01 | Tab Tư vấn — Overview | /e/service-order/:id/commissions | Summary Bar + Summary Cards + nút Cấu hình tư vấn |
| SCR-02 | Tab Tư vấn — Lịch sử giao dịch | (cùng page, section dưới SCR-01) | Flat Transaction List với search/filter |
3 loại đơn hàng dùng chung UI, chỉ khác route:
- Dịch vụ:
/e/service-order/:id/commissions- Mỹ phẩm:
/e/product-order/:id/commissions- Nạp tiền:
/e/prepaid-order/:id/commissions
B2) Component Inventory
| Component | Loại | Mới/Sửa | Mô tả |
|---|---|---|---|
OrderCommissions.tsx (656 lines) | Vue TSX | Sửa (rewrite) | Container chính — thay layout cũ bằng Summary Bar + Cards + Transaction List |
OrderCommissionTable.tsx | Vue TSX | Sửa | Chuyển từ nested expandable table sang Flat Transaction List |
OrderCommissionItem.tsx | Vue TSX | Xóa | Không còn dùng (nested row cũ) |
CommissionSummaryBar.tsx | Vue TSX | Mới | Summary Bar 4 chỉ số tổng đơn |
CommissionSummaryCards.tsx | Vue TSX | Mới | Card per NV (Phân bổ / Đã nhận + trạng thái) |
CommissionTransactionList.tsx | Vue TSX | Mới | Flat Transaction List với group header, search, filter |
i18n vi.ts — key ecommerce.label.commissions | i18n | Sửa | "Hoa hồng" -> "Tư vấn" |
OrderDetail.tsx:103 | Hardcode | Sửa | Đổi label hardcode |
ProductOrderDetail.tsx:78 | Hardcode | Sửa | Đổi label hardcode |
B3) User Flows
Flow 1: Manager xem tab Tư vấn — đơn bình thường
Manager mở /e/service-order/:id/
-> Click tab "Tư vấn"
-> Loading: skeleton Summary Bar + Cards, spinner Transaction List
-> Data load xong:
-> SCR-01: Summary Bar hiện 4 chỉ số (Phân bổ / Đã chi / Thu hồi / Đã nhận)
-> SCR-01: Summary Cards hiện card per NV (sort Phân bổ DESC)
-> SCR-02: Flat Transaction List hiện giao dịch (group by mã TT)
-> Manager hover icon ? bên cạnh "Phân bổ" -> tooltip giải thích
-> Manager click card "Nguyễn Quang Tiến" -> Transaction List filter chỉ NV đó
-> Manager click lại card "Nguyễn Quang Tiến" -> bỏ filter (toggle)Flow 2: POS Staff cấu hình tư vấn khi tạo đơn
POS Staff tạo đơn dịch vụ -> vào tab "Tư vấn"
-> Đơn mới, chưa có invoice:
-> Summary Bar: Phân bổ = 0đ, Đã chi = 0đ, Thu hồi = 0đ, Đã nhận = 0đ
-> Summary Cards: không hiện card nào
-> Transaction List: "Chưa có giao dịch"
-> Nút "Cấu hình tư vấn" nổi bật
-> POS click "Cấu hình tư vấn" -> mở dialog cấu hình (giữ nguyên)
-> Sau cấu hình:
-> Summary Bar: Phân bổ = 10.000đ, Đã chi = 0đ
-> Cards hiện NV vừa được gánFlow 3: Manager xem đơn có thu hồi [PLANNED]
Manager mở đơn hàng đã có thu hồi 1 phần
-> Summary Bar: Phân bổ = 40.000đ | Đã chi = 30.000đ | Thu hồi = 3.000đ | Đã nhận = 27.000đ
-> Context line: "10.000đ chờ thanh toán đợt tiếp theo"
-> Cards: NV A — Phân bổ 20.000đ / Đã nhận 12.000đ, trạng thái "Thu hồi 3.000đ"
-> Transaction List:
-> Group #MãTT có 2 sub-section: "Chi tư vấn" và "Thu hồi"
-> Dòng chi tư vấn: +15.000đ màu xanh
-> Dòng thu hồi: -3.000đ màu đỏ + "bởi: Trần Văn Admin"Flow 4: Click card filter giao dịch
Manager đang xem tab Tư vấn, có 3 NV
-> Click card "Nguyễn Quang Tiến"
-> Card "Nguyễn Quang Tiến" highlight (border active)
-> Transaction List chỉ hiện giao dịch của Nguyễn Quang Tiến
-> Groups không có giao dịch của NV này bị ẩn
-> Click lại card "Nguyễn Quang Tiến" -> bỏ filter (toggle)Flow 5: POS Staff — hết hạn edit
POS Staff mở đơn hàng đã quá expired_days_update_commission
-> Tab "Tư vấn" hiện bình thường (xem được)
-> Nút "Cấu hình tư vấn" ẨN (không disable, ẩn hoàn toàn)
-> Staff chỉ xem, không chỉnh sửaB4) Notification
Không đổi. Notification template "hoa hồng" -> "tư vấn" đã tách task riêng (DEC-007, Backlog Phase 2).
B5) Permission Matrix
| Màn hình | Action | IT Leader/Staff, HR Check | Manager (branch) | POS Staff (time-limited) | CRM (role+time) | Không có quyền |
|---|---|---|---|---|---|---|
| SCR-01 | Xem Summary Bar + Cards | Có | Có | Có | Có | Ẩn tab |
| SCR-01 | Nút "Cấu hình tư vấn" | Có (unlimited) | Có (unlimited) | Có (trong expired_days) | Có (role + trong hạn) | Ẩn nút |
| SCR-02 | Xem Transaction List | Có | Có | Có | Có | Ẩn tab |
| SCR-02 | Search + Filter | Có | Có | Có | Có | Ẩn tab |
Quy tắc Diva RBAC: Không có quyền -> ẩn hoàn toàn (không disable, không hiện placeholder). Permission logic giữ nguyên
canEditCommissionhiện có (ASM-001).
B6) State Matrix
| State | Điều kiện | SCR-01 Hiển thị | SCR-02 Hiển thị |
|---|---|---|---|
| Loading | fetching = true | Skeleton Summary Bar + skeleton Cards | Spinner (giữ pattern cũ) |
| Success — có data | order_commission + invoice_commission có | Summary Bar 4 số + Cards + context line | Transaction List đầy đủ |
| Empty — chưa cấu hình | order_commission rỗng | Bar tất cả = 0đ, không hiện card | "Chưa có giao dịch" + nút "Cấu hình tư vấn" nổi bật |
| Empty — cấu hình nhưng chưa có invoice | order_commission có, invoice_commission rỗng | Bar: Phân bổ = {X}đ, Đã chi = 0đ. Cards hiện với Đã nhận = 0đ | "Chưa có giao dịch" |
| Error | Query fail | "Không tải được dữ liệu tư vấn" + nút "Thử lại" | "Không tải được dữ liệu" + nút "Thử lại" |
| No Permission | Không có quyền xem tab | Tab "Tư vấn" ẩn khỏi tab bar | Tab ẩn |
B-Desktop) SCR-01: Tab Tư vấn — Overview
Wireframe tổng thể
┌─────────────────────────────────────────────────────────────────────────────────────┐
│ Tab: [Thông tin] [Dịch vụ] [Thanh toán] [▸ Tư vấn ◂] [Lịch sử] │
├─────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─── SUMMARY BAR ───────────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Phân bổ (?) Đã chi (?) Thu hồi (?) Đã nhận (?) │ │
│ │ 40.000đ 30.000đ 3.000đ 27.000đ │ │
│ │ │ │
│ │ (i) 10.000đ chờ thanh toán đợt tiếp theo │ │
│ │ │ │
│ └───────────────────────────────────────────────────────────────────────────────┘ │
│ │
│ PHÂN BỔ TƯ VẤN [Cấu hình tư vấn] │
│ ───────────────────────────────────────────────────────────────────────────────── │
│ │
│ ┌──────────────────┐ ┌──────────────────┐ ┌──────────────────┐ │
│ │ (A) Nguyễn Q.Tiến│ │ (A) Lê Thị Mai │ │ (A) Trần Văn An │ │
│ │ Kỹ thuật viên │ │ Kỹ thuật viên │ │ Tư vấn viên │ │
│ │ │ │ │ │ │ │
│ │ Phân bổ 20.000đ │ │ Phân bổ 12.000đ │ │ Phân bổ 8.000đ │ │
│ │ Đã nhận 15.000đ │ │ Đã nhận 12.000đ │ │ Đã nhận 0đ │ │
│ │ │ │ │ │ │ │
│ │ (v) Thu hồi │ │ (v) Đã chi đủ │ │ (!) Còn 8.000đ │ │
│ │ 5.000đ │ │ │ │ │ │
│ │ │ │ │ │ │ │
│ │ > Chi tiết │ │ > Chi tiết │ │ > Chi tiết │ │
│ └──────────────────┘ └──────────────────┘ └──────────────────┘ │
│ │
│ CUSTOMER COMMISSION / NGƯỜI GIỚI THIỆU (KEEP - legacy, nếu có dữ liệu) │
│ ───────────────────────────────────────────────────────────────────────────────── │
│ Giữ nguyên block customer commission / affiliate / referral hiện tại. │
│ Không redesign, không remove trong phase này. │
│ │
│ ... (SCR-02 Transaction List bên dưới) ... │
│ │
└─────────────────────────────────────────────────────────────────────────────────────┘Summary Bar — Chi tiết
┌────────────────────────────────────────────────────────────────────────┐
│ │
│ Phân bổ (?) Đã chi (?) Thu hồi (?) Đã nhận (?) │
│ 40.000đ 30.000đ 3.000đ 27.000đ │
│ │
│ (i) 10.000đ chờ thanh toán đợt tiếp theo │
│ │
└────────────────────────────────────────────────────────────────────────┘Quy tắc context line:
| Điều kiện | Context line |
|---|---|
Phân bổ > Đã chi | "(i) {Phân bổ - Đã chi}đ chờ thanh toán đợt tiếp theo" |
Phân bổ == Đã nhận và không có thu hồi | "(v) Đã chi đủ" |
Thu hồi > 0 | Không hiện context riêng (đã hiện ở Thu hồi) |
Summary Card — Chi tiết
┌──────────────────────────┐
│ (Avatar) Nguyễn Quang Tiến│
│ Kỹ thuật viên │
│ │
│ Phân bổ (?) 20.000đ │
│ Đã nhận (?) 15.000đ │
│ │
│ (v) Thu hồi 5.000đ │ <- trạng thái 1 dòng
│ │
│ > Chi tiết │ <- click expand breakdown
└──────────────────────────┘Trạng thái 1 dòng quy tắc:
| Điều kiện | Hiển thị | Style |
|---|---|---|
| Đã nhận == Phân bổ | "(v) Đã chi đủ" | text-positive |
| Đã nhận < Phân bổ, không thu hồi | "(!) Còn {Phân bổ - Đã nhận}đ" | text-warning |
| Có thu hồi | "(v) Thu hồi {thu_hồi}đ" | text-negative |
| Đã nhận == 0 và có thu hồi | "(v) Đã thu hồi hết" | text-negative |
Expand "Chi tiết" — breakdown theo dịch vụ:
┌──────────────────────────────────┐
│ (Avatar) Nguyễn Quang Tiến │
│ Kỹ thuật viên │
│ │
│ Phân bổ (?) 20.000đ │
│ Đã nhận (?) 15.000đ │
│ │
│ (v) Thu hồi 5.000đ │
│ │
│ v Chi tiết │ <- expanded
│ ┌──────────────────────────────┐ │
│ │ Dịch vụ Phân bổ │ │
│ ├──────────────────────────────┤ │
│ │ BTX thiết kế nữ cười 10.000đ │ │
│ │ Chăm sóc da mặt 5.000đ │ │
│ │ Trị mụn chuyên sâu 5.000đ │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘Cards layout wrap (> 5 NV)
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ NV 1 │ │ NV 2 │ │ NV 3 │ │ NV 4 │ │ NV 5 │
└────────┘ └────────┘ └────────┘ └────────┘ └────────┘
┌────────┐ ┌────────┐
│ NV 6 │ │ NV 7 │ <- wrap xuống hàng mới
└────────┘ └────────┘- Max 5 cards/hàng
- Cards sort theo Phân bổ DESC (NV phân bổ nhiều nhất lên trước)
- Responsive: mobile có thể 2 cards/hàng (xem B8)
Card filter active state
┌──────────────────────────┐ ┌──────────────────────────┐
│ ** ACTIVE ** │ │ (inactive) │
│ ┃ (A) Nguyễn Quang Tiến ┃│ │ (A) Lê Thị Mai │
│ ┃ Kỹ thuật viên ┃│ │ Kỹ thuật viên │
│ ┃ ... ┃│ │ ... │
│ └────────────────────────┘│ └──────────────────────────┘
^ border-primary ^ border-default
click lại → bỏ filterB-Desktop) SCR-02: Lịch sử giao dịch — Flat Transaction List
Wireframe — Đơn 1 lần TT, không thu hồi (FR-004a: simplest case)
[Tìm theo mã thanh toán, mã giao dịch, tên NV... ] [Tất cả ▼]
─────────────────────────────────────────────────────────────────────
── #INV-20260323-001 . 23/03/2026 ── (v) Đã chi . 23.000đ ───────── <- group header
┌────┬──────────────┬─────────────────────┬──────────────┬──────────────────┐
│ # │ Mã GD │ Nhân viên │ Số tiền │ Thời gian │
├────┼──────────────┼─────────────────────┼──────────────┼──────────────────┤
│ 1 │ TT02071583 │ Nguyễn Quang Tiến │ +10.000đ │ 23/03/2026 14:30 │
│ 2 │ TT02071584 │ Lê Thị Mai │ +8.000đ │ 23/03/2026 14:30 │
│ 3 │ TT02071585 │ Trần Văn An │ +5.000đ │ 23/03/2026 14:30 │
└────┴──────────────┴─────────────────────┴──────────────┴──────────────────┘Luôn hiện group header — mỗi NV có mã GD riêng, group header hiện mã TT giúp user biết thuộc cùng 1 lần thanh toán (DEC-003 v1.1). Số tiền hiện
+X.XXXđmàu xanh (positive).
Wireframe — Đơn nhiều lần TT, không thu hồi (FR-004b)
[Tìm theo mã thanh toán, mã giao dịch, tên NV... ] [Tất cả ▼]
─────────────────────────────────────────────────────────────────────
── #INV-20260323-002 . 23/03/2026 ── (v) Đã chi . 18.000đ ───────── <- group header
┌────┬──────────────┬─────────────────────┬──────────────┬──────────────────┐
│ # │ Mã GD │ Nhân viên │ Số tiền │ Thời gian │
├────┼──────────────┼─────────────────────┼──────────────┼──────────────────┤
│ 1 │ TT02071590 │ Nguyễn Quang Tiến │ +10.000đ │ 23/03/2026 15:00 │
│ 2 │ TT02071591 │ Lê Thị Mai │ +8.000đ │ 23/03/2026 15:00 │
└────┴──────────────┴─────────────────────┴──────────────┴──────────────────┘
── #INV-20260322-001 . 22/03/2026 ── (v) Đã chi . 12.000đ ───────── <- group header
┌────┬──────────────┬─────────────────────┬──────────────┬──────────────────┐
│ # │ Mã GD │ Nhân viên │ Số tiền │ Thời gian │
├────┼──────────────┼─────────────────────┼──────────────┼──────────────────┤
│ 1 │ TT02071583 │ Nguyễn Quang Tiến │ +7.000đ │ 22/03/2026 10:30 │
│ 2 │ TT02071584 │ Trần Văn An │ +5.000đ │ 22/03/2026 10:30 │
└────┴──────────────┴─────────────────────┴──────────────┴──────────────────┘Group header dạng divider:
-- #MãTT . DD/MM/YYYY -- (icon) Trạng thái . X.XXXđ --Groups sort thời gian DESC (lần TT mới nhất trên).
Wireframe — Đơn có thu hồi [PLANNED] (FR-004c)
[Tìm theo mã thanh toán, mã giao dịch, tên NV... ] [Tất cả ▼]
─────────────────────────────────────────────────────────────────────
── #INV-20260323-002 . 23/03/2026 ── (!) Thu hồi 30% . 12.600đ ──── <- group header
Chi tư vấn 18.000đ <- sub-section header
┌────┬──────────────┬─────────────────────┬──────────────┬──────────────────┐
│ # │ Mã GD │ Nhân viên │ Số tiền │ Thời gian │
├────┼──────────────┼─────────────────────┼──────────────┼──────────────────┤
│ 1 │ TT02071590 │ Nguyễn Quang Tiến │ +10.000đ │ 23/03/2026 15:00 │
│ 2 │ TT02071591 │ Lê Thị Mai │ +8.000đ │ 23/03/2026 15:00 │
└────┴──────────────┴─────────────────────┴──────────────┴──────────────────┘
Thu hồi 5.400đ <- sub-section header (đỏ)
┌────┬──────────────┬─────────────────────┬──────────────┬──────────────────┐
│ # │ Mã GD │ Nhân viên │ Số tiền │ Thời gian │
├────┼──────────────┼─────────────────────┼──────────────┼──────────────────┤
│ 1 │ WD02089310 │ Nguyễn Quang Tiến │ -3.000đ │ 23/03/2026 16:00 │
│ │ │ │ bởi: Admin A │ │
│ 2 │ WD02089311 │ Lê Thị Mai │ -2.400đ │ 23/03/2026 16:00 │
│ │ │ │ bởi: Admin A │ │
└────┴──────────────┴─────────────────────┴──────────────┴──────────────────┘Group header trạng thái theo tỷ lệ thu hồi:
- 0% -> "(v) Đã chi"
- 1-99% -> "(!) Thu hồi {X}%" (FORMULA-005)
- 100% -> "(v) Đã hoàn tiền"
Group header số tiền = Sum chi tư vấn - Sum thu hồi (net). Chi tư vấn:
+X.XXXđmàu xanh. Thu hồi:-X.XXXđmàu đỏ + sub-text "bởi:{Admin name}".
Wireframe — Empty state (FR-009)
[Tìm theo mã thanh toán, mã giao dịch, tên NV... ] [Tất cả ▼]
─────────────────────────────────────────────────────────────────────
┌───────────────────────────────────────────────────────────────────┐
│ │
│ Chưa có giao dịch │
│ │
└───────────────────────────────────────────────────────────────────┘Wireframe — Loading state (FR-010)
┌─── SUMMARY BAR ──────────────────────────────────────────────────┐
│ ████████ ████████ ████████ ████████ │ <- skeleton bars
│ ██████ ██████ ██████ ██████ │
└──────────────────────────────────────────────────────────────────┘
┌────────────────┐ ┌────────────────┐ ┌────────────────┐
│ ██████████████ │ │ ██████████████ │ │ ██████████████ │ <- skeleton cards
│ ████████ │ │ ████████ │ │ ████████ │
│ ████ ████ │ │ ████ ████ │ │ ████ ████ │
└────────────────┘ └────────────────┘ └────────────────┘
┌───────────────────────────────────────────────────────────────────┐
│ ● ● ● │ <- spinner
└───────────────────────────────────────────────────────────────────┘Loading độc lập: Cards có thể load xong trước Transaction List (FR-010).
Search + Dropdown Filter (FR-005, FR-006)
┌──────────────────────────────────────────────┐ ┌─────────────────┐
│ (icon) Tìm theo mã TT, mã GD, tên NV... [x] │ │ Tất cả ▼ │
└──────────────────────────────────────────────┘ └─────────────────┘
┌─────────────────┐
│ Tất cả │
│ Chi tư vấn │
│ Thu hồi │
└─────────────────┘- Search: debounce 300ms, nút clear (x) khi có text
- Dropdown: client-side filter
- Match: invoice.code (mã TT) HOẶC transaction_request.code (mã GD) HOẶC user.display_name (tên NV)
B6) Copy Text Dictionary
| Key | Text (VI) | Context |
|---|---|---|
tab_label | Tư vấn | Tab label (sửa từ "Hoa hồng") |
section_title | PHÂN BỔ TƯ VẤN | Section header SCR-01 |
btn_configure | Cấu hình tư vấn | Button SCR-01 |
summary_allocation | Phân bổ | Summary Bar label |
summary_disbursed | Đã chi | Summary Bar label |
summary_revoked | Thu hồi | Summary Bar label |
summary_received | Đã nhận | Summary Bar label |
context_remaining | {X}đ chờ thanh toán đợt tiếp theo | Context line khi Phân bổ > Đã chi |
context_fully_paid | Đã chi đủ | Context line khi Phân bổ == Đã nhận |
card_status_full | Đã chi đủ | Card status |
card_status_remaining | Còn {X}đ | Card status |
card_status_revoked | Thu hồi {X}đ | Card status |
card_status_all_revoked | Đã thu hồi hết | Card status |
card_detail | Chi tiết | Expand link |
card_detail_service | Dịch vụ | Breakdown table header |
col_index | # | Table header |
col_transaction_code | Mã GD | Table header |
col_employee | Nhân viên | Table header |
col_amount | Số tiền | Table header |
col_time | Thời gian | Table header |
subsection_disburse | Chi tư vấn | Sub-section header |
subsection_revoke | Thu hồi | Sub-section header |
revoke_by | bởi: | Sub-text thu hồi row |
group_status_disbursed | Đã chi | Group header (0% revoke) |
group_status_revoke_pct | Thu hồi {X}% | Group header (1-99%) |
group_status_refunded | Đã hoàn tiền | Group header (100%) |
search_placeholder | Tìm theo mã thanh toán, mã giao dịch, tên nhân viên... | Search input |
filter_all | Tất cả | Dropdown option |
filter_disburse | Chi tư vấn | Dropdown option |
filter_revoke | Thu hồi | Dropdown option |
empty_no_transaction | Chưa có giao dịch | Empty state Transaction List |
error_message | Không tải được dữ liệu tư vấn | Error state |
btn_retry | Thử lại | Error retry button |
report_label | Báo cáo tư vấn | Report module label (DEC-008) |
message_advisor | người tư vấn | Replace "người nhận hoa hồng" |
B7) Analytics
| Event | Trigger | Payload | Mục đích |
|---|---|---|---|
advisory_tab_viewed | User mở tab Tư vấn | order_id, order_type, user_role | Đo adoption rate tab mới |
advisory_card_clicked | User click card NV để filter | order_id, employee_id | Đo mức độ tương tác với card filter |
advisory_card_expanded | User expand "Chi tiết" trên card | order_id, employee_id | Đo nhu cầu xem breakdown dịch vụ |
advisory_search_used | User nhập search (sau debounce) | order_id, query_length | Đo mức độ cần search |
advisory_filter_changed | User đổi dropdown filter | order_id, filter_value | Đo loại giao dịch quan tâm nhất |
advisory_tooltip_shown | User hover icon ? để xem tooltip | order_id, tooltip_field | Đo mức độ cần giải thích thuật ngữ |
advisory_configure_clicked | User click "Cấu hình tư vấn" | order_id, user_role | Đo tần suất cấu hình |
B8) Responsive
Feature này chạy trên Web Admin (diva-admin) — desktop-first. Tuy nhiên POS variant có thể dùng trên tablet.
| Breakpoint | SCR-01 Cards | SCR-02 Table | Search + Filter |
|---|---|---|---|
| Desktop (>= 1280px) | Max 5 cards/hàng | Full columns | Search + dropdown 1 hàng |
| Tablet (768-1279px) | Max 3 cards/hàng | Ẩn cột Thời gian, hover để xem | Search + dropdown 1 hàng |
| Mobile (< 768px) | Max 2 cards/hàng | Ẩn cột Mã GD + Thời gian, chỉ hiện NV + Số tiền | Search và dropdown tách 2 hàng |
Summary Bar: Responsive từ 4 cột (desktop) -> 2x2 grid (tablet) -> 1 cột vertical (mobile).
B9) Tooltip Dictionary
| Màn hình | Field/Icon | Tooltip Text (VI) | Điều kiện hiện |
|---|---|---|---|
| SCR-01 Summary Bar | Phân bổ (?) | Tổng số tiền tư vấn được cấu hình cho các nhân viên trên đơn hàng này. Đây là số tiền dự kiến, chưa phải thực chi. | Hover icon ? |
| SCR-01 Summary Bar | Đã chi (?) | Tổng số tiền tư vấn đã được chuyển vào ví (wallet) của nhân viên thông qua các lần thanh toán đã hoàn tất. | Hover icon ? |
| SCR-01 Summary Bar | Thu hồi (?) | Số tiền tư vấn bị rút lại do hoàn đơn hoặc điều chỉnh. | Hover icon ? |
| SCR-01 Summary Bar | Đã nhận (?) | Số tiền nhân viên thực tế giữ được = Đã chi - Thu hồi. Đây là con số cuối cùng. | Hover icon ? |
| SCR-01 Card | Phân bổ (?) | Số tiền tư vấn được gán cho nhân viên này từ đơn hàng. | Hover icon ? |
| SCR-01 Card | Đã nhận (?) | Số tiền nhân viên này thực tế giữ = Đã chi - Thu hồi. | Hover icon ? |
| SCR-02 Group header | Chi tư vấn | Giao dịch chuyển tiền tư vấn vào ví nhân viên khi đơn hàng được thanh toán. | Hover text "Chi tư vấn" |
| SCR-02 Sub-section | Thu hồi | Giao dịch rút lại tiền tư vấn đã chi, thường do hoàn đơn hoặc sửa sai. | Hover text "Thu hồi" |
B-Edge Cases
| # | Case | Mô tả | SCR-01 Behavior | SCR-02 Behavior | Ref |
|---|---|---|---|---|---|
| 1 | Đơn 1 DV, 1 NV, 1 lần TT | Case đơn giản nhất — đơn dịch vụ "BTX thiết kế nữ cười", NV Nguyễn Quang Tiến, 1 invoice | Summary Bar: Phân bổ = Đã nhận = 10.000đ. 1 card, trạng thái "Đã chi đủ". | 1 group header + 1 dòng, 5 cột. | FR-004a, DEC-003 |
| 2 | Đơn nhiều DV, nhiều NV, nhiều lần TT | Đơn có 3 DV (BTX, Chăm sóc da, Trị mụn), 3 NV, 2 lần thanh toán | Summary Bar tổng cộng. 3 cards sort Phân bổ DESC. Card expand hiện breakdown 3 DV. | 2 group headers (1 per lần TT). Mỗi group nhiều dòng. Sort group DESC theo thời gian. | FR-004b, FR-002 |
| 3 | Đơn có thu hồi 1 phần [PLANNED] | Đơn đã chi 30.000đ, thu hồi 3.000đ (10%) | Summary Bar: Thu hồi = 3.000đ, Đã nhận = 27.000đ. Cards hiện trạng thái "Thu hồi {X}đ". | Group bị ảnh hưởng tách 2 sub-section. Header hiện "Thu hồi 10%". Số tiền = net. | FR-004c, DEC-006 |
| 5 | Đơn chưa có invoice (empty state) | Đơn mới tạo, đã cấu hình commission nhưng chưa thanh toán | Bar: Phân bổ = {X}đ, Đã chi = 0đ. Cards hiện với Đã nhận = 0đ, trạng thái "Còn {X}đ". | "Chưa có giao dịch" centered. | FR-009, DEC-005 |
| 6 | Đơn chưa cấu hình commission | order_commission rỗng | Bar: tất cả = 0đ. Không hiện card. Nút "Cấu hình tư vấn" nổi bật. | "Chưa có giao dịch". | FR-009 |
| 7 | NV > 5 người | 7 NV được cấu hình tư vấn | 5 cards hàng 1 + 2 cards hàng 2 (wrap). Sort Phân bổ DESC. | Transaction List dài hơn, nhiều dòng. | FR-002 |
| 8 | Đơn prepaid vs service (formula khác) | Đơn nạp tiền: commission tính trên giá trị nạp, không theo % DV | Cards hiện tương tự (Phân bổ / Đã nhận). Chi tiết không hiện breakdown DV (1 dòng duy nhất). | Giao dịch giống, không có nhiều DV để breakdown. | ASM-003 |
| 9 | Thu hồi 100% — đã hoàn tiền hết | Tất cả tiền tư vấn bị thu hồi | Bar: Đã nhận = 0đ. Cards: trạng thái "Đã thu hồi hết". | Group header: "Đã hoàn tiền". Sub-section Thu hồi = toàn bộ. | FR-004c |
| 10 | Số tiền lớn (> 10.000.000đ) | Đơn hàng giá trị cao, commission lớn | Format: 10.000.000đ (dấu chấm phân cách). Kiểm tra không bị overflow card width. | Cột Số tiền đủ rộng để hiện số lớn. | FR-012 |
| 11 | Search không có kết quả | User nhập tên NV không tồn tại | Không ảnh hưởng SCR-01. | Transaction List: "Không tìm thấy giao dịch phù hợp" | FR-005 |
| 12 | Filter "Thu hồi" nhưng chưa có thu hồi | Đơn chưa có giao dịch thu hồi, user chọn dropdown "Thu hồi" | Không ảnh hưởng SCR-01. | "Không có giao dịch thu hồi" | FR-006 |
| 13 | NV bị soft delete | NV đã bị xóa nhưng có commission cũ | Card vẫn hiện (data từ order_commission). Avatar fallback default. | Giao dịch vẫn hiện với tên NV. | Discovery: soft delete pattern |
| 14 | Đơn hàng bị hủy (canceled) | Đơn hàng đã hủy nhưng có commission data | Summary Bar vẫn hiện (data cũ). Không hiện nút "Cấu hình tư vấn" (edit bị ẩn). | Transaction List vẫn hiện giao dịch cũ. | FR-008 permission |
| 15 | Thu hồi > Đã chi (bất thường) | Trường hợp lỗi data: thu hồi vượt đã chi | Bar: Đã nhận = số âm, hiện màu đỏ. Card: Đã nhận màu đỏ. | Group header: số tiền âm, màu đỏ. Cảnh báo bất thường. | FORMULA-004 edge case |
Traceability Matrix
| FR | SCR | Wireframe section | Copy Text keys | Tooltip | Edge Case # |
|---|---|---|---|---|---|
| FR-001 | SCR-01 | Summary Bar | summary_*, context_* | Phân bổ, Đã chi, Thu hồi, Đã nhận | 1, 2, 3, 5, 6, 10 |
| FR-002 | SCR-01 | Summary Card | card_* | Phân bổ (card), Đã nhận (card) | 1, 2, 7, 8, 9 |
| FR-003 | SCR-01 | Card filter active state | — | — | 2, 7 |
| FR-004a | SCR-02 | Đơn 1 lần TT | col_* | — | 1 |
| FR-004b | SCR-02 | Đơn nhiều lần TT | col_*, group_* | — | 2 |
| FR-004c | SCR-02 | Đơn có thu hồi | subsection_*, revoke_by, group_* | Chi tư vấn, Thu hồi | 3, 9, 15 |
| FR-005 | SCR-02 | Search + Dropdown | search_placeholder | — | 11 |
| FR-006 | SCR-02 | Search + Dropdown | filter_* | — | 12 |
| FR-007 | All | Copy Text Dictionary | tab_label, section_title, btn_configure, report_label, message_advisor | — | — |
| FR-008 | SCR-01 | Section title + button | btn_configure | — | 6, 14 |
| FR-009 | SCR-01, SCR-02 | Empty state | empty_no_transaction | — | 5, 6 |
| FR-010 | SCR-01, SCR-02 | Loading state | — | — | — |
| FR-011 | SCR-01, SCR-02 | Sort order | — | — | 2, 7 |
| FR-012 | SCR-01, SCR-02 | All wireframes (format tiền) | — | — | 1, 2, 3, 15 |
| FR-013 | SCR-01, SCR-02 | (inline icons) | — | All B9 tooltips | All |