# run: 2026-08-04-S171-khkk-ui-mirror-pe

**Phiên:** S171 (L10 window-3) · **Ngày:** 2026-08-04 · **Lead:** em-main (Opus 5)
**Đề-bài owner (verbatim):** *"OK hiện thì điều chỉnh lại giao diện chỗ KKHĐ lại nhé, lấy của Duyệt NCC làm mẫu: Panel 1: Hình gửi 1 · Panel 3: Duyệt và History tương tự (Hình 2) · Panel 2 - Giữa: Cấu trúc tương tự như duyệt NCC (Phần content nhập phía trên, duyệt ghi chú phía dưới) - Hình 3."*
**Engine:** `/fable-real investigator-codebase` (LỆNH-A single deep-pass) → `/fable-clone reviewer` (LỆNH-B ensemble) → giao Opus 5 MAX thực-thi.

---

## Bối-cảnh ẢNH (subagent KHÔNG xem được ảnh — lead mô-tả lại, đây là nguồn duy nhất về ý-đồ UI)

Owner gửi 3 screenshot màn **Duyệt NCC** (PE) đang chạy prod, làm MẪU cho KHKK:

**Ảnh 1 — Panel 1 (trái) + khung tổng:**
- Header trang: icon clipboard + `Duyệt NCC` + badge đếm `45`.
- Panel trái: ô search placeholder `Tìm mã / tên gói thầu / dự án…` · dropdown `Tất cả trạng thái` · cây thu-gọn được `📅 Năm 2026` kèm badge `45`.
- Panel giữa khi chưa chọn: empty-state icon + `Chọn phiếu ở danh sách`.
- Panel phải khi chưa chọn: empty-state `Quy trình duyệt sẽ hiện khi chọn phiếu.` (có nút ✕).

**Ảnh 2 — Panel 3 (phải), thứ tự dọc:**
1. Tiêu đề `Quy trình duyệt` + dòng meta `QT-DN-V2-001 v04 · Quy trình Duyệt NCC`.
2. Banner xanh lá: `Phiếu đã kết thúc tại Phòng Kiểm soát Chi phí · Cấp 2 — không qua CEO.`
3. Các **Bước**: `Bước 1 — Phòng 1` + chip tên phòng (`Phòng Cung ứng`); trong mỗi bước là các **Cấp** (`Cấp 1 đã duyệt` / `Cấp 2 đã duyệt`), mỗi cấp liệt kê NV kèm badge vai (`NS PRO`, `NS CCM`); người duyệt thật in đậm, các NV cùng cấp còn lại hiện dạng `/ Tên` mờ. Bước chưa tới **làm mờ toàn khối** + chip `Kết thúc tại Cấp 2`. Có badge đặc-biệt `⚑ Duyệt thay CEO`.
4. `File đính kèm khi duyệt` — phụ đề `File do người duyệt tải lên trong quá trình duyệt.` + hàng file (tên · size · nút xem · nút tải).
5. `Lịch sử duyệt (6)` — mỗi entry: badge hành-động (`Duyệt` xanh / `Trả lại` vàng kèm `→ Lùi về Cấp 2`) · tên người · `[Bước N — Cấp M]` · timestamp `HH:mm:ss dd/M/yyyy` · nội-dung ghi-chú nhiều dòng.

**Ảnh 3 — Panel 2 (giữa), owner khoanh ĐỎ phần dưới:**
- **Trên** = content nhập: bảng số liệu có dòng đánh số (`8. Giá trị thực hiện dự kiến còn lại`, `9. Giá trị tổng thực hiện dự kiến` — dòng tổng nền xanh đậm, số âm màu đỏ trong ngoặc) → card `THÔNG TIN CHỌN THẦU` (`① TÊN NCC/TP ĐƯỢC CHỌN` nền xanh nhạt · `2–3. GIÁ ĐỀ XUẤT TỪ PRO/CCM` Min/Max · `Giá chốt duyệt` + badge `Giá NCC` · `4. Bảng so sánh giá` hàng attachment · `5. Link hồ sơ` + nút `Copy`).
- **Dưới (KHOANH ĐỎ)** = `5. Ý KIẾN CẤP DUYỆT (SIGN-OFF THEO WORKFLOW)`: nhóm theo **BƯỚC → PHÒNG**, mỗi nhóm có header trái (`BƯỚC 1 — PHÒNG 1` + chip tên phòng) và meta phải (`2/2 cấp đã duyệt · 5 NV tham gia`); bên trong là **lưới 2 cột** các card ý-kiến: `Cấp N — Tên người` + badge `✓ Đã duyệt` + nội-dung ghi-chú (nhiều dòng, giữ xuống dòng) + timestamp; ý-kiến rỗng render placeholder `(duyệt — không ý kiến)`. Bước chưa duyệt render `— Chưa có ý kiến duyệt.`
- Cây trái trong ảnh này cho thấy **cấu trúc 4 folder theo giai-đoạn** dưới mỗi gói thầu: `Duyệt NCC` → `Kế hoạch Hợp đồng` → `Duyệt Hợp đồng` → `Hợp đồng cứng` (3 cái sau đang badge `SẮP`), và card phiếu mang chip `GẤP (PRO)` · `⚑ Kết thúc · Phòng 2` · `Đã duyệt` + mã `PE/2026/A/019` + timestamp + tên người.

---

## Ground-truth lead đã ĐO trước khi phóng (để lane khỏi đo lại)

| Sự-thật | Bằng-chứng |
|---|---|
| PE 3-panel grid = `lg:grid-cols-[400px_1fr_360px]` | `fe-admin/src/pages/pe/PurchaseEvaluationsListPage.tsx:397` |
| PE panel 1/2/3 = `PeListPanel` · `PeDetailTabs` · `PeWorkflowPanel` | cùng file `:658 :678` + imports `:28 :31` |
| KHKK **list** hiện là **2-panel** `lg:grid-cols-[19rem_minmax(0,1fr)]` + `PipelineTreePanel` | `fe-admin/src/pages/khkk/KhkkListPage.tsx:197-198` |
| KHKK **detail** là **trang riêng full-width**, `KhkkWorkflowPanel` render **INLINE ngay dưới header** (không phải rail phải) | `fe-admin/src/pages/khkk/KhkkDetailPage.tsx:411` + comment `:9` |
| Cả PE lẫn KHKK đều **SHA256 IDENTICAL** giữa fe-admin ⟂ fe-user | đo @S171: 4/4 cặp file `same=YES` |
| LOC | PE Workspace 147 · PE List 807 · `PeDetailTabs` 179.376 B · `PeWorkflowPanel` 63.472 B · Khkk Detail 1.093 · Khkk List 361 · KhkkWorkflowPanel 491 |
| KHKK **chưa có** `components/khkk/` — mọi thứ nằm trong `pages/khkk/` | `ls fe-admin/src/components/khkk/` → không tồn tại |

🔴 **Delta cốt lõi:** PE = **một màn 3-panel hợp nhất** (chọn ở trái → nội-dung giữa → workflow/history phải). KHKK = **list 2-panel** + **detail trang riêng** có workflow **xếp chồng trên** nội-dung. Đây là khoảng cách kiến-trúc, không phải khoảng cách CSS.

---

## taskList snapshot

### Stage A — `/fable-real` (LỆNH-A, 1 lane, `tier:'fable'`)

| # | role | label | nhiệm-vụ |
|---|---|---|---|
| 1 | `investigator-codebase` | `Core investigator-codebase invest s171` | Deep-pass MAP toàn-diện PE-vs-KHKK trên 3 panel + đề-xuất bố-trí đồng-nhất, phân-loại rõ **GIỐNG-được** ⟂ **KHÁC-buộc-phải-khác** (+ lý-do domain). Propose-only. |

### Stage B — `/fable-clone` (LỆNH-B, ensemble ≥3 lane, `tier:'opus'`)

| # | role | label | lăng-kính |
|---|---|---|---|
| 1 | `reviewer` | `Gate reviewer lens-fidelity s171` | Trung-thành ảnh/ý-đồ owner + "tương tự thì giống nhau" |
| 2 | `reviewer` | `Gate reviewer lens-feasibility s171` | Khả-thi kỹ-thuật: data-shape KHKK có đủ nuôi 3 panel không |
| 3 | `reviewer` | `Gate reviewer lens-regression s171` | Rủi-ro vỡ cái đang chạy: route · policy `KeHoachKyKet` (gotcha #85) · mirror 2-app · Pattern 16-bis |

### Stage C — thực-thi

Opus 5 MAX theo `spec-khkk-ui-mirror-pe-04-08-2026.md` (lead ghi SAU khi verify — engine KHÔNG tự ghi).

---

## Stages

- [ ] A — `/fable-real investigator-codebase` deep-pass
- [ ] B — `/fable-clone reviewer` ensemble 3 lăng-kính
- [ ] C — lead verify + refute/synthesize → ghi spec-file 3-mục
- [ ] D — giao Opus 5 MAX thực-thi

## Synthesis

(chờ)