[CLAUDE] Contract: KHKK 3-panel mirror Duyet NCC (GD2 het lech kien-truc) + 4 mitigation cuong-hanh

Dua man Ke hoach Ky ket HD ve dung lop kien-truc ma GD1 (PE) va GD3 (HD) dang
dung: 1 man 3-panel h-[calc(100vh-4rem)] grid [400px_1fr_360px], thay cho
list 2-panel + detail trang rieng co workflow xep chong. GD2 la mat-xich lech
duy nhat trong 4 giai-doan truoc dot nay.

BE (7/7):
- DetailDto +5 field: WorkflowVersion / EndedByLevelFinalize / FinalizeStepName
  / FinalizeLevelName / Approvals. 2 field Finalize* KHONG phai field append —
  ContractSigningPlan chi co co bool, phai DAN XUAT (lam in-memory tu cay
  workflow da nap, thay vi port 3 subquery cua PE).
- ContractSigningPlanApprovalDto de moi (truoc do 0 hit toan repo).
- StepDto +DepartmentName (nuoi chip phong panel 3 + header nhom Section 5).
- GET {id}/changelogs — policy KeHoachKyKet.Read.
- POST {id}/approval-attachments + enum +ApprovalAttachment=3 (append-only).
- approvals[] loc bo Decision=Pending de so (N) cung nghia voi (N) cua PE.
- KHONG chep khuon authz cua PurchaseEvaluationsController: file do la mot lo
  gotcha #82 (class [Authorize] tran + changelogs khong policy).

FE (x2 app, SHA256 byte-identical 8/8):
- components/khkk/{KhkkListPanel,KhkkDetailContent,KhkkWorkflowPanel}.tsx;
  KhkkWorkflowPanel doi tu pages/ sang components/.
- Panel 2: 5 Section danh so, Section 5 "Y kien cap duyet" duoi cung — khoi nay
  DOI TU panel 3 sang panel 2 (owner khoanh do trong anh); luoi 2 cot + meta
  "x/y cap da duyet · N NV tham gia" thay list phang 1 cot.
- Panel 3: banner ket-thuc-som, chip ten phong, badge Duyet thay CEO, lam mo
  buoc sau finalize, khoi File dinh kem khi duyet, Lich su duyet, Lich su
  thay doi. Chua chon phieu -> hop dashed y PE (QD owner).

4 mitigation cuong-hanh (owner chot panel 1 = PipelineTreePanel; chon HINH
khong phai chap-nhan VO):
- M-1 fallback !canPe -> danh-sach KHKK phang. Khong co no, user chi co quyen
  KHKK (vd nguoi duyet nhom N5) MAT TRANG danh-sach du API van cho doc —
  display-layer khoa authz-layer dang mo, mat con lai cua #82.
- M-2 onOpen thanh callback tu host; mac-dinh giu navigate cu => 0 hoi-quy
  trang PE/GD3.
- B1 stage2Content di CAP voi stage2Count qua conditional-spread:
  khong truyen => stage2 van nhan groups => trang PE GIU NGUYEN 8 ngan N1-N8.
- R-11 search/loc di server-side, KHONG loc-tren-cay; giu dong canh-bao
  "Cay tai 200 phieu moi nhat".

Chong hoi-quy da do: build 3/3 PASS · acceptance tinh 20/20 x 2 app ·
mirror SHA256 8/8 · 0 hit path cam (components|pages)/(pe|contracts) ·
KHONG ghi filter/view/group vao URL (chong tai-sinh bug S155 sidebar sang
nham leaf) · giu set-state-in-render :97-101 (dung khuon React, refactor
thanh useEffect se tai-hien va-5).

Con no, khai thang:
- E-7 bang "cot nao chet, chuyen di dau" (8 cot + 6 KpiCard -> card 400px)
  THIEU: lane FE chet o luot tra ve, ly-do bo cot mat theo. Phai soi diff
  bang mat truoc UAT, neu khong dung ca M-7 mat-chuc-nang-im-lang.
- Test 643/644. 1 FLAKY Create_DifferentEvaluationType_DoesNotAffect_Other
  (full-suite 2->1->1, chay rieng 0/0/0; PeWorkflowAdminTests tao
  new SqliteDbFixture() rieng x6 test). Baseline tren HEAD sach CHUA do
  (git worktree fail duong-dan Dropbox) => CHUA duoc noi "flake co san".
- 5 acceptance RUNTIME cho UAT: approvals co dong Tra lai + ten nguoi (DB dev
  0 hang KHKK) · UAT fe-user:8080 an-danh · deep-link fe-admin:8082 (menu
  KHKK bi an trong ADMIN_HIDDEN_KEYS) · negative-control go fallback canPe ·
  khoi file tu-an khi rong.
- P3-12 4 return-mode = HOAN, khong phai buoc-khac: tien-de "KHKK 3 tram ngan"
  do lai la SAI (DbInitializer:554 = 3 Buoc x <=2 Cap, seed tu ghi "sao tu
  workflow Duyet NCC prod").

Spec + 6 artifact phan-bien: .claude/workflows/runs/2026-08-04-S171-khkk-ui-mirror-pe/

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

fe-user/src/pages/khkk/KhkkListPage.tsx

@@ -1,49 +1,47 @@
-// [W2 KHKK — S161 2026-07-29] Danh sách "Kế hoạch ký kết HĐ" (GĐ2).
-// Khuôn `pages/office/ProposalsListPage.tsx` (PURO layout: ui/PageHeader + hàng
-// KpiCard làm bộ lọc + bảng + phân trang). File MIRROR SHA256 identical với
-// fe-admin counterpart.
+// [S171] HOST 3-PANEL của màn "Kế hoạch ký kết HĐ" (GĐ2) — đưa GĐ2 về CÙNG bố-cục với
+// Duyệt NCC (GĐ1, `pages/pe/PurchaseEvaluationsListPage.tsx:381,397`) và Hợp đồng
+// (GĐ3, `pages/contracts/ContractsListPage.tsx:106,125`). Trước S171 trang này là
+// `space-y-5` cuộn-body 2 panel ⇒ mắt-xích lệch DUY NHẤT trong 4 giai-đoạn.
+// File MIRROR SHA256 identical với fe-admin counterpart.
 //
-// URL vào từ menu (Layout.tsx — staticMap cho nhóm 1, regex `Khkk_G{n}_*` cho nhóm
-// 2..8; đây là "chỗ thứ 4" của Pattern 16-bis):
+// Khuôn code lấy từ `ContractsListPage.tsx` (255 dòng, gọn) — CỐ Ý KHÔNG chép
+// `PurchaseEvaluationsListPage.tsx` (807 dòng: kéo theo `deleted`/`pendingMe`/`awId`/overlay).
+// Số đo panel lấy của PE (400px) vì hiến-pháp owner là "giống nhất với Duyệt NCC".
+//
+// URL vào từ menu (Layout.tsx — staticMap nhóm 1, regex `Khkk_G{n}_*` nhóm 2..8):
 //   Khkk_List / Khkk_G{n}_List         → /khkk/list?group={n}
 //   Khkk_Pending / Khkk_G{n}_Pending   → /khkk/list?group={n}&filter=ChoDuyet
 //   Khkk_Approved / Khkk_G{n}_Approved → /khkk/list?group={n}&filter=DaDuyet
 //   Khkk_Deleted / Khkk_G{n}_Deleted   → /khkk/list?group={n}&view=deleted
-// 🔴 Chip lọc chỉ đổi STATE, KHÔNG ghi lại URL — giữ nguyên URL của leaf đang đứng
-// nên menu không sáng nhầm (bug UAT S155 khi URL leaf trùng URL user tự lọc).
 //
-// [K4b S166] 🔴 8 nhóm dùng CHUNG một route ⇒ mọi thứ lấy từ URL phải ĐỌC LẠI MỖI
-// RENDER, không chụp một lần lúc mount: đi từ leaf nhóm 2 sang leaf nhóm 5 là đổi
-// query chứ không đổi route, React Router không dựng lại component nên `useState(...)`
-// khởi tạo một lần sẽ giữ nguyên bộ lọc cũ (trước K4b phải F5 mới đúng — vá-5).
-// Bộ lọc người dùng bấm được giữ ở lớp override và tự nhả ra khi URL đổi (xem dưới).
-import { useMemo, useState, type ReactNode } from 'react'
+// 🔴 [M-4] KHOÁ URL ĐƯỢC PHÉP GHI = `id` (∈ `TRANSIENT_QUERY_KEYS`, `Layout.tsx:350`).
+// TUYỆT ĐỐI KHÔNG ghi `filter` / `view` / `group` vào `setSearchParams`: đứng ở leaf
+// `?group=1` mà ghi thêm `filter=DaDuyet` là URL khớp CHÍNH XÁC leaf "Đã duyệt" của nhóm ⇒
+// sidebar sáng nhầm mục — đúng bug UAT S155. Bộ lọc người dùng bấm sống ở LỚP OVERRIDE
+// (state) như bản cũ, không ghi ngược URL.
+//
+// 🔴 [K4b S166 · R-5] 8 nhóm dùng CHUNG một route ⇒ mọi thứ lấy từ URL phải ĐỌC LẠI MỖI
+// RENDER. Khối reset dưới đây là SET-STATE-TRONG-RENDER **CÓ CHỦ ĐÍCH** (khuôn React
+// "reset state khi input đổi") — ai refactor thành `useEffect` sẽ tái-hiện vá-5 (đi từ
+// leaf nhóm 2 sang leaf nhóm 5 phải F5 mới đúng). ĐỪNG ĐỘNG.
+import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import {
-  Plus, Search, FileCheck, FileEdit, SendHorizontal,
-  CheckCircle2, Undo2, XCircle, Layers, Inbox, Trash2,
-} from 'lucide-react'
-import { PageHeader } from '@/components/ui/PageHeader'
-import { KpiCard } from '@/components/ui/KpiCard'
+import { FileCheck, Plus, X } from 'lucide-react'
+import { EmptyState } from '@/components/EmptyState'
 import { Button } from '@/components/ui/Button'
-import { Input } from '@/components/ui/Input'
-import { PipelineTreePanel } from '@/components/pipeline/PipelineTreePanel'
+import { KhkkListPanel } from '@/components/khkk/KhkkListPanel'
+import { KhkkDetailContent } from '@/components/khkk/KhkkDetailContent'
+import { KhkkWorkflowPanel } from '@/components/khkk/KhkkWorkflowPanel'
+import { useAuth } from '@/contexts/AuthContext'
 import { api } from '@/lib/api'
-import { cn } from '@/lib/cn'
 import {
-  KHKK_APPROVAL_GROUP_LABELS,
-  KHKK_PHASE_BADGE,
-  KHKK_PHASE_LABELS,
   KhkkPhase,
   khkkGroupMenuLabel,
-  type KhkkListItemDto,
+  type KhkkDetailDto,
   type KhkkPhaseValue,
-  type PagedResult,
 } from '@/types/khkk'
 
-const PAGE_SIZE = 20
-
 // Tên phase trong query `?filter=` → int (URL đọc được, không dính số ma thuật).
 const FILTER_TO_PHASE: Record<string, KhkkPhaseValue> = {
   DangSoanThao: KhkkPhase.DangSoanThao,
@@ -53,308 +51,156 @@ const FILTER_TO_PHASE: Record<string, KhkkPhaseValue> = {
   TuChoi: KhkkPhase.TuChoi,
 }
 
-function formatVnd(n: number | null): string {
-  if (n === null || n === undefined) return '—'
-  return n.toLocaleString('vi-VN') + ' đ'
-}
-
-function formatDate(iso: string): string {
-  const d = new Date(iso)
-  return d.toLocaleDateString('vi-VN', { day: '2-digit', month: '2-digit', year: 'numeric' })
-}
-
 export function KhkkListPage() {
   const navigate = useNavigate()
-  const [searchParams] = useSearchParams()
+  const [searchParams, setSearchParams] = useSearchParams()
+  const { user } = useAuth()
 
-  // ---- [K4b S166] 3 trục DANH TÍNH đọc thẳng từ URL, KHÔNG chụp một lần lúc mount ----
-  // Cả 8 nhóm dùng CHUNG một route `/khkk/list`; bấm leaf này sang leaf kia chỉ đổi
-  // query, React Router KHÔNG remount ⇒ giá trị khởi tạo của `useState` không chạy lại.
-  // Đó là lý do trước K4b bấm leaf→leaf phải F5 mới thấy đúng (vá-5).
+  // ---- 3 trục DANH TÍNH đọc thẳng từ URL (chỉ ĐỌC — không bao giờ ghi lại, xem M-4) ----
   const urlFilter = searchParams.get('filter')
   const urlPhase: KhkkPhaseValue | null = urlFilter ? (FILTER_TO_PHASE[urlFilter] ?? null) : null
   const deletedView = searchParams.get('view') === 'deleted'
-  // `?group=` — chỉ nhận 1..8; rác/thiếu ⇒ null = XEM TẤT CẢ NHÓM (không tự đoán nhóm 1,
-  // vì "vắng tham số" và "nhóm 1" là hai ý khác nhau; leaf nhóm 1 nay mang group=1 tường minh).
   const groupParam = searchParams.get('group')
-  const group = groupParam !== null && /^[1-8]$/.test(groupParam) ? Number(groupParam) : null
+  const urlGroup = groupParam !== null && /^[1-8]$/.test(groupParam) ? Number(groupParam) : null
+  const selectedId = searchParams.get('id')
 
-  // ---- Bộ lọc do NGƯỜI DÙNG bấm (6 chip KpiCard) đè lên bộ lọc của URL ----
-  // 🔴 3 trạng thái, KHÔNG gộp được: `undefined` = chưa bấm chip ⇒ nghe theo URL;
-  //    `null` = user chủ động chọn "Tất cả"; số = user chọn một trạng thái.
-  //    Gộp `undefined` với `null` thì chọn "Tất cả" sẽ bị URL kéo ngược về filter cũ.
+  // ---- Lớp override do NGƯỜI DÙNG bấm, đè lên bộ lọc của URL ----
+  // 🔴 3 trạng thái, KHÔNG gộp được: `undefined` = chưa chạm ⇒ nghe theo URL; `null` = user
+  // chủ động chọn "Tất cả"; số = user chọn một giá trị. Gộp `undefined` với `null` thì chọn
+  // "Tất cả" sẽ bị URL kéo ngược về bộ lọc cũ.
   const [chipPhase, setChipPhase] = useState<KhkkPhaseValue | null | undefined>(undefined)
+  const [groupOverride, setGroupOverride] = useState<number | null | undefined>(undefined)
   const [search, setSearch] = useState('')
   const [page, setPage] = useState(1)
 
-  // Đổi leaf ⇒ trả bộ lọc chip về cho URL và về trang 1 (đang đứng trang 5 của nhóm 2
-  // mà nhảy sang nhóm 5 thì trang 5 gần như chắc chắn rỗng). Điều chỉnh state NGAY
-  // TRONG RENDER theo khuôn React "reset state khi input đổi" — dùng `useEffect` sẽ
-  // vẽ một lượt bằng dữ liệu cũ rồi mới sửa (nháy). `search` CỐ Ý giữ lại: đang tìm
-  // một mã rồi đổi nhóm để dò tiếp là thao tác có thật.
-  const navKey = `${group ?? ''}|${urlFilter ?? ''}|${deletedView ? 'del' : ''}`
+  // Đổi leaf ⇒ trả bộ lọc về cho URL và về trang 1. `search` CỐ Ý giữ lại: đang tìm một mã
+  // rồi đổi nhóm để dò tiếp là thao tác có thật.
+  const navKey = `${urlGroup ?? ''}|${urlFilter ?? ''}|${deletedView ? 'del' : ''}`
   const [lastNavKey, setLastNavKey] = useState(navKey)
   if (navKey !== lastNavKey) {
     setLastNavKey(navKey)
     setChipPhase(undefined)
+    setGroupOverride(undefined)
     setPage(1)
   }
   const phase: KhkkPhaseValue | null = chipPhase !== undefined ? chipPhase : urlPhase
+  const group: number | null = groupOverride !== undefined ? groupOverride : urlGroup
 
-  const list = useQuery({
-    // 🔴 [vá-3] `group` PHẢI nằm trong khoá cache. Thiếu nó thì 8 leaf "Danh sách" của
-    // 8 nhóm dùng CHUNG một ô cache ⇒ mở nhóm 5 lại thấy dữ liệu nhóm 2 trong khoảnh
-    // khắc trước khi refetch, và tệ hơn là không refetch nếu còn fresh (sai CÂM, không
-    // có lỗi nào nổ). Trục `?filter=` đã nằm sẵn trong khoá dưới dạng ĐÃ GIẢI MÃ là
-    // `phase` (`FILTER_TO_PHASE` đơn ánh, và `phase` cũng chính là thứ gửi lên server)
-    // ⇒ khoá này phủ đủ cả hai trục vá-3 nhắc; thêm `filter` thô nữa chỉ tách đôi ô
-    // cache cho hai request y hệt nhau.
-    queryKey: ['khkk-list', { group, phase, search, page, deletedView }],
-    queryFn: async () => {
-      // Phiếu xóa mềm bị HasQueryFilter che ở list thường — chỉ endpoint riêng
-      // `/deleted` thấy (mirror PE `/purchase-evaluations/deleted`, S155).
-      const url = deletedView ? '/contract-signing-plans/deleted' : '/contract-signing-plans'
-      return (await api.get<PagedResult<KhkkListItemDto>>(url, {
-        params: {
-          phase: deletedView ? undefined : (phase ?? undefined),
-          // [K4b S166 — FLAG-1 ĐÃ NỐI CẢ 2 NHÁNH] `/deleted` nay nhận `group` mirror
-          // List (lead vá BE cùng lượt: Controller + `ListDeletedContractSigningPlansQuery`
-          // + handler lọc SAU vế IDOR). Gửi thẳng cho cả hai — lọc là việc server,
-          // total/số-trang vì thế nói thật ở cả màn sống lẫn màn đã-xóa.
-          group: group ?? undefined,
-          search: search.trim() || undefined,
-          page,
-          pageSize: PAGE_SIZE,
-        },
-      })).data
-    },
+  const detail = useQuery({
+    queryKey: ['khkk-detail', selectedId],
+    queryFn: async () => (await api.get<KhkkDetailDto>(`/contract-signing-plans/${selectedId}`)).data,
+    enabled: !!selectedId,
   })
 
-  const items = list.data?.items ?? []
-  const total = list.data?.total ?? 0
-  const totalPages = list.data?.totalPages ?? 1
+  function setId(id: string | null) {
+    const next = new URLSearchParams(searchParams)
+    if (id == null) next.delete('id')
+    else next.set('id', id)
+    setSearchParams(next)
+  }
 
-  // Presentation-only: đếm trên trang đang tải (không fetch thêm). Card đang active
-  // hiện `total` thật từ server; card khác chỉ là gợi ý nhìn nhanh.
-  const countByPhase = useMemo(() => {
-    const acc: Record<number, number> = { 1: 0, 2: 0, 3: 0, 98: 0, 99: 0 }
-    for (const p of items) acc[p.phase] = (acc[p.phase] ?? 0) + 1
-    return acc
-  }, [items])
+  function selectPlan(id: string) {
+    // `<lg` không có 3 panel ⇒ mở trang chi tiết đầy đủ (route `/khkk/:id` GIỮ NGUYÊN).
+    if (typeof window !== 'undefined' && window.matchMedia('(min-width: 1024px)').matches) {
+      setId(id)
+    } else {
+      navigate(group !== null ? `/khkk/${id}?group=${group}` : `/khkk/${id}`)
+    }
+  }
 
-  const phaseCards: Array<{
-    value: KhkkPhaseValue | null
-    label: string
-    icon: ReactNode
-    accent: 'brand' | 'teal' | 'violet' | 'amberx' | 'greenx'
-    count: number
-  }> = [
-    { value: null, label: 'Tất cả', icon: <Layers className="h-4 w-4" />, accent: 'brand', count: phase === null ? total : items.length },
-    { value: KhkkPhase.DangSoanThao, label: KHKK_PHASE_LABELS[1], icon: <FileEdit className="h-4 w-4" />, accent: 'violet', count: phase === 1 ? total : countByPhase[1] },
-    { value: KhkkPhase.ChoDuyet, label: KHKK_PHASE_LABELS[2], icon: <SendHorizontal className="h-4 w-4" />, accent: 'amberx', count: phase === 2 ? total : countByPhase[2] },
-    { value: KhkkPhase.DaDuyet, label: KHKK_PHASE_LABELS[3], icon: <CheckCircle2 className="h-4 w-4" />, accent: 'greenx', count: phase === 3 ? total : countByPhase[3] },
-    { value: KhkkPhase.TraLai, label: KHKK_PHASE_LABELS[98], icon: <Undo2 className="h-4 w-4" />, accent: 'violet', count: phase === 98 ? total : countByPhase[98] },
-    { value: KhkkPhase.TuChoi, label: KHKK_PHASE_LABELS[99], icon: <XCircle className="h-4 w-4" />, accent: 'amberx', count: phase === 99 ? total : countByPhase[99] },
-  ]
+  const plan = detail.data
+  // [P2-7] `readOnly` do HOST quyết — KHÔNG cần dựng workspace riêng để có bản chỉ-xem.
+  const readOnly =
+    !plan
+    || !(plan.phase === KhkkPhase.DangSoanThao || plan.phase === KhkkPhase.TraLai)
+    || (!!user?.id && plan.drafterUserId !== user.id)
+
+  const headerTitle = deletedView
+    ? (group !== null ? `Kế hoạch ký kết HĐ — N${group} · đã xóa` : 'Kế hoạch ký kết HĐ — đã xóa')
+    : group !== null ? `Kế hoạch ký kết HĐ — N${group}` : 'Kế hoạch ký kết HĐ'
 
   return (
-    <div className="space-y-5">
-      <PageHeader
-        eyebrow="Giai đoạn 2"
-        title={
-          deletedView
-            ? (group !== null ? `Kế hoạch ký kết HĐ — N${group} · đã xóa` : 'Kế hoạch ký kết HĐ — đã xóa')
-            : group !== null
-              ? `Kế hoạch ký kết HĐ — N${group}`
-              : 'Kế hoạch ký kết HĐ'
-        }
-        subtitle={
-          // [K4b S166] Màn "Đã xóa" nay ĐƯỢC in tên nhóm — `/deleted` đã lọc server-side
-          // theo `group` (FLAG-1 nối cùng lượt), tên nhóm hết là lời nói dối.
-          deletedView
-            ? (group !== null ? `${khkkGroupMenuLabel(group)} — phiếu đã xóa mềm, chỉ xem` : 'Phiếu đã xóa mềm — chỉ xem danh sách')
-            : group !== null
-              ? khkkGroupMenuLabel(group)
-              : 'Chốt giá per-NCC trúng thầu + căn cứ hồ sơ trước khi ký hợp đồng'
-        }
-        icon={deletedView ? <Trash2 className="h-5 w-5" /> : <FileCheck className="h-5 w-5" />}
-        accent="brand"
-        actions={
-          deletedView ? undefined : (
-            // Mang nhóm đang xem sang màn lập phiếu — không bắt người dùng chọn lại
-            // đúng cái nhóm họ vừa đứng (bắt tay với vá-6 bên `KhkkCreatePage`).
-            <Button onClick={() => navigate(group !== null ? `/khkk/create?group=${group}` : '/khkk/create')}>
-              <Plus className="mr-2 h-4 w-4" />
-              Lập kế hoạch
-            </Button>
-          )
-        }
-      />
-
-      {/* [S162] Cây toàn trình bám trái + nội dung cũ giữ nguyên bên phải (owner
-          chốt AskUser 30-07: "áp cả các trang GĐ khác"). `minmax(0,1fr)` để bảng
-          8 cột không thổi vỡ lưới ở 1366; `<lg` cây xếp trên và tự thu gọn. */}
-      <div className="grid gap-5 lg:grid-cols-[19rem_minmax(0,1fr)] xl:grid-cols-[21rem_minmax(0,1fr)]">
-        <PipelineTreePanel currentStage={2} />
-
-        <div className="min-w-0 space-y-5">
-      {!deletedView && (
-        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-6">
-          {phaseCards.map((c) => (
-            <KpiCard
-              key={c.value ?? 'all'}
-              label={c.label}
-              value={c.count}
-              icon={c.icon}
-              accent={c.accent}
-              active={phase === c.value}
-              onClick={() => {
-                // Ghi vào lớp override, KHÔNG ghi vào URL — giữ URL của leaf đang đứng
-                // để sidebar không sáng nhầm mục khác (bài S155, xem ghi chú đầu file).
-                setChipPhase(c.value)
-                setPage(1)
-              }}
-            />
-          ))}
+    <div className="flex h-[calc(100vh-4rem)] flex-col">
+      <header className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-slate-200 bg-white px-6 py-3">
+        <div className="flex min-w-0 items-center gap-2">
+          <FileCheck className="h-5 w-5 text-slate-500" />
+          <h1 className="truncate text-base font-semibold tracking-tight text-slate-900">{headerTitle}</h1>
+          <span className="ml-2 truncate rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
+            Giai đoạn 2{group !== null ? ` · ${khkkGroupMenuLabel(group)}` : ''}
+          </span>
         </div>
-      )}
-
-      <div className="card-accent flex items-center gap-3 px-4 py-3" style={{ ['--accent' as string]: 'var(--color-brand-500)' }}>
-        <Search className="h-4 w-4 shrink-0 text-slate-400" />
-        <Input
-          value={search}
-          onChange={(e) => {
-            setSearch(e.target.value)
-            setPage(1)
-          }}
-          placeholder="Tìm mã kế hoạch, mã phiếu hoặc tên gói thầu..."
-          className="max-w-md border-0 bg-transparent px-0 shadow-none focus-visible:ring-0"
-        />
-      </div>
-
-      <div className="card-accent overflow-hidden" style={{ ['--accent' as string]: 'var(--color-brand-500)' }}>
-        {/* [S162] Cột trái ăn ~19rem ⇒ bảng 8 cột cuộn ngang trong thẻ thay vì
-            tràn ra ngoài lưới trên laptop 1366. */}
-        <div className="overflow-x-auto">
-        <table className="w-full text-sm">
-          <thead className="border-b border-slate-200 bg-slate-50/70">
-            <tr>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Mã kế hoạch</th>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Gói thầu</th>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Dự án</th>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Trạng thái</th>
-              <th className="label-eyebrow px-4 py-2.5 text-right">Tổng đề xuất</th>
-              {/* [K2 S164 — vá-8] Σ `ApprovedAmount` (`ListItemDto:64`). Không có cột này
-                  thì màn danh sách nói "Tổng đề xuất" còn màn chi tiết nói "Giá duyệt"
-                  trên CÙNG một phiếu đã duyệt ⇒ người dùng đọc ra hai con số. */}
-              <th className="label-eyebrow px-4 py-2.5 text-right">Tổng duyệt</th>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Người soạn</th>
-              <th className="label-eyebrow px-4 py-2.5 text-left">Ngày tạo</th>
-            </tr>
-          </thead>
-          <tbody>
-            {list.isLoading && (
-              <tr>
-                <td colSpan={8} className="px-4 py-8 text-center text-slate-500">
-                  Đang tải...
-                </td>
-              </tr>
-            )}
-            {!list.isLoading && items.length === 0 && (
-              <tr>
-                <td colSpan={8} className="px-4 py-10 text-center text-slate-500">
-                  <span
-                    className="icon-chip mx-auto mb-2 flex"
-                    style={{ ['--chip-bg' as string]: '#f1f5f9', ['--chip-fg' as string]: '#94a3b8' }}
-                    aria-hidden
-                  >
-                    <Inbox className="h-4 w-4" />
-                  </span>
-                  {deletedView ? 'Không có phiếu đã xóa.' : 'Chưa có kế hoạch ký kết nào.'}
-                </td>
-              </tr>
-            )}
-            {items.map((k) => (
-              <tr
-                key={k.id}
-                onClick={() => !deletedView && navigate(`/khkk/${k.id}`)}
-                className={cn(
-                  'border-b border-slate-100 transition last:border-0',
-                  deletedView ? 'opacity-70' : 'cursor-pointer hover:bg-brand-50/50',
-                )}
-              >
-                <td className="px-4 py-2.5">
-                  <span className="inline-flex items-center gap-2">
-                    <span
-                      className="icon-chip h-7! w-7!"
-                      style={{ ['--chip-bg' as string]: 'var(--color-brand-50)', ['--chip-fg' as string]: 'var(--color-brand-600)' }}
-                      aria-hidden
-                    >
-                      <FileCheck className="h-3.5 w-3.5" />
-                    </span>
-                    <span className="font-mono text-xs text-brand-800">{k.maKeHoach ?? '—'}</span>
-                    {/* [K2 S164] Badge NHÓM DUYỆT — đặt cạnh mã thay vì đẻ cột thứ 9:
-                        bảng này đã cuộn ngang ở 1366 khi có cây bên trái (ghi chú S162).
-                        `!= null` guard cho payload cũ còn trong cache React Query (trước
-                        K2 DTO chưa có field) — thiếu guard thì in ra "Nundefined". */}
-                    {k.approvalGroup != null && (
-                      <span
-                        className="inline-flex items-center rounded border border-violet-300 bg-violet-100 px-1.5 py-0.5 text-[10px] font-semibold text-violet-800"
-                        title={KHKK_APPROVAL_GROUP_LABELS[k.approvalGroup] ?? `Nhóm ${k.approvalGroup}`}
-                      >
-                        N{k.approvalGroup}
-                      </span>
-                    )}
-                  </span>
-                </td>
-                <td className="max-w-xs truncate px-4 py-2.5 font-medium text-brand-800">
-                  {k.peTenGoiThau ?? '—'}
-                  {k.peMaPhieu && <span className="ml-2 font-mono text-[11px] text-slate-400">{k.peMaPhieu}</span>}
-                </td>
-                <td className="max-w-[14rem] truncate px-4 py-2.5 text-xs text-slate-600">{k.projectName ?? '—'}</td>
-                <td className="px-4 py-2.5">
-                  <span
-                    className={cn(
-                      'inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium',
-                      KHKK_PHASE_BADGE[k.phase as KhkkPhaseValue],
-                    )}
-                  >
-                    {KHKK_PHASE_LABELS[k.phase as KhkkPhaseValue]}
-                  </span>
-                  {k.currentApprovalLevelOrder && (
-                    <span className="ml-2 text-xs text-slate-500">Cấp {k.currentApprovalLevelOrder}</span>
-                  )}
-                </td>
-                <td className="px-4 py-2.5 text-right tabular-nums text-brand-800">{formatVnd(k.totalProposedAmount)}</td>
-                {/* Phiếu chưa duyệt BE trả 0 (không phải null) ⇒ ép về "—" cho khỏi đọc
-                    nhầm "đã duyệt 0 đ"; số chỉ hiện khi thật sự có tiền đã chốt. */}
-                <td className="px-4 py-2.5 text-right tabular-nums text-emerald-700">
-                  {k.totalApprovedAmount ? formatVnd(k.totalApprovedAmount) : '—'}
-                </td>
-                <td className="px-4 py-2.5 text-xs text-slate-600">{k.drafterFullName ?? '—'}</td>
-                <td className="px-4 py-2.5 text-xs text-slate-600">{formatDate(k.createdAt)}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-        </div>
-        {totalPages > 1 && (
-          <div className="flex items-center justify-between border-t border-slate-200 px-4 py-2.5 text-sm">
-            <div className="text-slate-500">
-              {total} kế hoạch — Trang {page} / {totalPages}
-            </div>
-            <div className="flex gap-1">
-              <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => p - 1)}>
-                Trước
-              </Button>
-              <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
-                Sau
-              </Button>
-            </div>
-          </div>
+        {!deletedView && (
+          <Button onClick={() => navigate(group !== null ? `/khkk/create?group=${group}` : '/khkk/create')}>
+            <Plus className="mr-2 h-4 w-4" />
+            Lập kế hoạch
+          </Button>
         )}
-      </div>
-        </div>
+      </header>
+
+      <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
+        {/* Panel 1 — cây toàn trình (owner QĐ-1) + 4 mitigation, xem KhkkListPanel.tsx */}
+        <KhkkListPanel
+          selectedId={selectedId}
+          onSelect={selectPlan}
+          search={search}
+          onSearchChange={(v) => { setSearch(v); setPage(1) }}
+          phase={phase}
+          onPhaseChange={(v) => { setChipPhase(v); setPage(1) }}
+          group={group}
+          onGroupChange={(v) => { setGroupOverride(v); setPage(1) }}
+          deletedView={deletedView}
+          page={page}
+          onPageChange={setPage}
+          selectedFinalize={
+            plan
+              ? { endedByLevelFinalize: plan.endedByLevelFinalize, finalizeStepName: plan.finalizeStepName }
+              : undefined
+          }
+        />
+
+        {/* Panel 2 — nội dung phiếu. [F-1] EmptyState là trạng-thái ĐẦU TIÊN người dùng thấy;
+            thiếu nó thì host 3-panel mở ra là một mảng trắng ở giữa. */}
+        <main className="hidden overflow-y-auto bg-slate-50 p-6 lg:block">
+          {!selectedId && (
+            <EmptyState
+              icon={FileCheck}
+              title={deletedView ? 'Phiếu đã xóa — chỉ xem danh sách' : 'Chọn phiếu ở danh sách'}
+              description={deletedView
+                ? 'Mục này chỉ liệt kê phiếu đã xóa để đối chiếu. Không mở chi tiết, không thao tác.'
+                : 'Nội dung kế hoạch + dòng giá NCC + căn cứ hồ sơ + ý kiến cấp duyệt sẽ hiển thị ở đây.'}
+            />
+          )}
+          {selectedId && detail.isLoading && <div className="text-sm text-slate-500">Đang tải…</div>}
+          {selectedId && !detail.isLoading && !plan && (
+            <div className="text-sm text-red-600">Không tìm thấy phiếu.</div>
+          )}
+          {selectedId && plan && (
+            <KhkkDetailContent plan={plan} readOnly={readOnly} onChanged={() => detail.refetch()} />
+          )}
+        </main>
+
+        {/* Panel 3 — quy trình duyệt + lịch sử.
+            🔴 OWNER CHỐT (QĐ-2): chưa chọn phiếu ⇒ CHỈ hộp dashed y hệt Duyệt NCC
+            (`PurchaseEvaluationsListPage.tsx:669-676`). KHÔNG nhét `PipelineTreePanel` vào
+            đây — cây đã sống ở panel 1 theo QĐ-1, nhét lần hai là trùng. Khác GĐ3 ở điểm
+            này là CÓ CHỦ ĐÍCH. */}
+        <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
+          {!selectedId && (
+            <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
+              <X className="mx-auto mb-2 h-5 w-5" />
+              {deletedView
+                ? 'Phiếu đã xóa không còn quy trình duyệt.'
+                : 'Quy trình duyệt sẽ hiện khi chọn phiếu.'}
+            </div>
+          )}
+          {selectedId && plan && (
+            <KhkkWorkflowPanel
+              plan={plan}
+              onChanged={() => detail.refetch()}
+              onDeleted={() => setId(null)}
+            />
+          )}
+        </aside>
       </div>
     </div>
   )