[CLAUDE] Contract: KHKK go 2 nut phu, nut + tren dong, header chi ma, xoa duoc phieu Tra lai

Anh gui 2 anh + 1 dong nhan, gom 6 diem:

(1) "bo nut sua voi ve lai form": go TRON dai 2 nut goc phai cua KhkkCreatePage
    (Sua + X Ve form tao). Ca hai deu la duong PHU:
      - vao che-do sua -> but chi o DANH SACH trai (onEditPlan) = duong DUY NHAT, GIU.
      - roi che-do xem -> bam PE bat ky o cay trai, pickPe() tu setViewPlanId(null).
    Dinh chinh chu-thich S175 tung dung do ("bo han thi nguoi dung ket, khong co
    duong lui"): SAI ngay luc viet — pickPe mang nhan [S174] tuc DA TON TAI truoc
    cau canh-bao do. Thu duy nhat mat di la duong quay lai man rong huong-dan.
    Go luon import Pencil/X (het cho dung).

(2) "To dam" (ma) + (3) "Bo di" (ten): header muc 2 gio CHI con MA, in dam.
    Fallback ve TEN khi thieu ma: peWorkItemCode null khi PE khong gan hang muc
    (WorkItemId loose-Guid Mig 49, duoc phep rong) — bo ten VO DIEU KIEN thi ca do
    header tro moi chu "Hang muc (du an)", trong nhu loi render.

(4) "Them dau + them o day" + (5) "bo di": thay khoi "Them hang muc cho: [NCC...]"
    bang nut + o COT HANH-DONG cua TUNG DONG. Nut o dong nao thi BIET SAN NCC cua
    dong do (l.supplierId) nen bo duoc buoc chon NCC. Khoi cu ton tai chi vi no dung
    NGOAI moi dong nen buoc phai hoi "cho NCC nao".
    Vong doi khoi nay tron 3 nac trong CUNG luot S177 (S175 duoi bang -> doi vao
    tbody -> go han) — giu 1 dong vet de khoi ai dung lai.

(6) "Trang thai tra lai cho xoa dc luon nhe": allow-list xoa phieu
    {DangSoanThao, TuChoi} -> +TraLai.
    🔴 Day la VA LECH 2 TANG chu khong phai noi quyen: FE DA hien nut Xoa cho phieu
    TraLai tu truoc (canEdit gom TraLai => readOnly=false => thanh nut day hien),
    BE thi nem 409 — bam duoc ma khong xoa duoc (gotcha #82).
    +1 test DeleteContractSigningPlan_Allows_TraLai, DA CHUNG CO RANG: stash ban va
    -> test DO; tra ban va -> XANH. Test (8) cu khong bat duoc vi ve nghich dung
    ChoDuyet (cam ca truoc lan sau) va ve thuan dung TuChoi (cho ca truoc lan sau)
    — TraLai la phase DUY NHAT doi verdict va no vang mat khoi moi test.

645/645 test pass (+1) · 2 app build sach · SHA IDENTICAL (da verify identical @HEAD
TRUOC khi copy de) · dist local doi chieu: "Ve form tao" = 0.

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

fe-user/src/components/khkk/KhkkDetailContent.tsx

@@ -494,10 +494,14 @@ export function KhkkDetailContent({
               đúng ca "vắng-mặt trông giống ổn" (màn rỗng nhìn vẫn gọn nên không ai kêu). */}
           <div className="mb-3 flex flex-wrap items-baseline gap-x-2 gap-y-0.5 border-b border-slate-200 pb-2">
             <span className="label-eyebrow text-slate-500">Hạng mục (dự án)</span>
-            {plan.peWorkItemCode && (
-              <span className="font-mono text-[11px] font-medium text-slate-500">{plan.peWorkItemCode}</span>
-            )}
-            <span className="text-sm font-semibold text-slate-800">{plan.peWorkItemName ?? '—'}</span>
+            {/* [S177 — anh: "Tô đậm" (mã) + "Bỏ đi" (tên)] Header giờ CHỈ còn MÃ, in đậm.
+                🔴 Fallback về TÊN khi thiếu mã: `peWorkItemCode` null khi PE không gắn hạng mục
+                (`WorkItemId` là loose-Guid, Mig 49 — được phép rỗng). Bỏ tên VÔ ĐIỀU KIỆN thì
+                đúng ca đó header còn trơ mỗi chữ "Hạng mục (dự án)" — một nhãn không có giá trị
+                đi kèm, trông như lỗi render chứ không như "phiếu này chưa gắn hạng mục". */}
+            <span className="font-mono text-sm font-bold text-slate-800">
+              {plan.peWorkItemCode ?? plan.peWorkItemName ?? '—'}
+            </span>
           </div>
 
           {plan.lines.length === 0 ? (
@@ -605,47 +609,49 @@ export function KhkkDetailContent({
                         ) : moneyOrDash(l.proposedAmount)}
                       </td>
                       <td className="px-3 py-2 text-right align-top">
-                        {isDraft && !l.contractId && l.peReferenceAmount === 0 && (
-                          <button
-                            type="button"
-                            onClick={() => { if (window.confirm(`Xoá hạng mục "${l.tenHangMuc ?? '(chưa gán)'}"?`)) deleteLine.mutate(l.id) }}
-                            disabled={deleteLine.isPending}
-                            title="Xoá hạng mục này"
-                            className="rounded px-1 py-1 text-red-500 hover:bg-red-50"
-                          >
-                            <Trash2 className="h-3.5 w-3.5" />
-                          </button>
-                        )}
-                      </td>
-                    </tr>
-                  ))}
-                  {/* [S177 — anh: "+ thêm hạng mục ở đây"] Nút thêm DỜI TỪ DƯỚI BẢNG vào
-                      thành dòng cuối của `tbody` — ngay sau dòng dữ liệu cuối, TRÊN dòng TỔNG.
-                      🔴 `colSpan={4}` (không phải 3): bảng đã lên 4 cột từ đầu lượt S177.
-                      🔸 Panel nhập (`addFor`) VẪN Ở NGOÀI bảng — nó là form nhiều ô, nhét vào
-                      trong `<table>` thì vỡ lưới `table-fixed` đang giữ 3 cột số thẳng hàng. */}
-                  {isDraft && (
-                    <tr>
-                      <td colSpan={4} className="px-3 py-2">
-                        <div className="flex flex-wrap items-center gap-1.5">
-                          <span className="text-[11px] text-slate-500">Thêm hạng mục cho:</span>
-                          {[...new Map(plan.lines.map(l => [l.supplierId, l])).values()].map((l) => (
+                        {/* [S177 — anh: "Thêm dấu + thêm ở đây"] Nút THÊM về đúng cột hành-động
+                            của TỪNG DÒNG, thay khối "Thêm hạng mục cho: [NCC…]" (anh: "bỏ đi").
+                            🔴 Vì sao gọn hơn hẳn: nút ở dòng nào thì BIẾT SẴN NCC của dòng đó
+                            (`l.supplierId`), nên không phải bày danh sách NCC cho người dùng chọn
+                            lại thứ mà vị trí bấm đã nói rồi. Khối cũ tồn tại chỉ vì nó đứng NGOÀI
+                            mọi dòng nên buộc phải hỏi "cho NCC nào". */}
+                        <div className="flex items-center justify-end gap-0.5">
+                          {isDraft && (
                             <button
-                              key={l.supplierId}
                               type="button"
                               onClick={() => {
                                 setAddFor({ supplierId: l.supplierId, supplierName: l.supplierName })
                                 setAddCatalogId(''); setAddAmount(''); setAddNote('')
                               }}
-                              className="inline-flex items-center gap-1 rounded border border-brand-300 px-2 py-1 text-[11px] font-medium text-brand-700 transition hover:bg-brand-50"
+                              title={`Thêm hạng mục cho ${l.supplierName ?? 'NCC này'}`}
+                              aria-label={`Thêm hạng mục cho ${l.supplierName ?? 'NCC này'}`}
+                              className="rounded px-1 py-1 text-brand-600 hover:bg-brand-50"
                             >
-                              <Plus className="h-3 w-3" /> {l.supplierName ?? '(không rõ NCC)'}
+                              <Plus className="h-3.5 w-3.5" />
                             </button>
-                          ))}
+                          )}
+                          {isDraft && !l.contractId && l.peReferenceAmount === 0 && (
+                            <button
+                              type="button"
+                              onClick={() => { if (window.confirm(`Xoá hạng mục "${l.tenHangMuc ?? '(chưa gán)'}"?`)) deleteLine.mutate(l.id) }}
+                              disabled={deleteLine.isPending}
+                              title="Xoá hạng mục này"
+                              className="rounded px-1 py-1 text-red-500 hover:bg-red-50"
+                            >
+                              <Trash2 className="h-3.5 w-3.5" />
+                            </button>
+                          )}
                         </div>
                       </td>
                     </tr>
-                  )}
+                  ))}
+                  {/* 🧊 [S177 — anh: "bỏ đi"] Khối "Thêm hạng mục cho: [NCC…]" ĐÃ GỠ HẲN.
+                      Vòng đời đủ 3 nấc trong CÙNG lượt S177, giữ vết để khỏi ai dựng lại:
+                        (1) S175 đặt DƯỚI bảng → (2) anh: "+ thêm hạng mục ở đây" ⇒ dời vào
+                        `tbody` → (3) anh nhìn thật rồi chốt "bỏ đi", thay bằng nút **+** ở cột
+                        hành-động của TỪNG DÒNG (xem `<td>` hành-động phía trên).
+                      🔴 Chức năng KHÔNG mất: nút + trên dòng gọi đúng `setAddFor` cũ, và còn
+                      biết sẵn NCC nên bỏ được bước chọn NCC. Panel nhập `addFor` giữ nguyên. */}
                 </tbody>
                 {/* [S175 — anh: "chọn hạng mục tiền → thành tổng"] TỔNG = Σ giá các dòng.
                     🔴 KHÔNG có cột "giá tham chiếu" / "giá duyệt" nữa — anh chốt "ko cần so

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

@@ -29,7 +29,7 @@
 import { useState, type FormEvent, type ReactNode } from 'react'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { useSearchParams } from 'react-router-dom'
-import { FileCheck, Pencil, X } from 'lucide-react'
+import { FileCheck } from 'lucide-react'
 import { toast } from 'sonner'
 import { EmptyState } from '@/components/EmptyState'
 import { Button } from '@/components/ui/Button'
@@ -218,29 +218,17 @@ export function KhkkCreatePage() {
             const readOnly = !editPlan || !canEdit
             return (
             <div className="space-y-3">
-              {/* 🧊 [S175 — anh: "bỏ mấy dòng này đi"] Dải banner "Đang xem kế hoạch…" ĐÃ GỠ.
-                  Nút của nó đi đâu: **Sửa** → bút chì ở danh sách (đường duy nhất, đúng như
-                  banner cũ vẫn dặn) · **Xóa phiếu / Gửi duyệt** → THANH NÚT ĐÁY của
-                  `KhkkDetailContent`. Chỉ giữ đúng 1 dòng nhỏ để quay về form tạo — bỏ hẳn
-                  thì người dùng mở 1 phiếu xong là kẹt, không có đường lùi. */}
-              <div className="flex items-center justify-end gap-2">
-                {readOnly && canEdit && (
-                  <button
-                    type="button"
-                    onClick={() => setEditPlan(true)}
-                    className="inline-flex items-center gap-1 rounded px-2 py-1 text-[11px] font-medium text-brand-700 transition hover:bg-brand-50"
-                  >
-                    <Pencil className="h-3 w-3" /> Sửa
-                  </button>
-                )}
-                <button
-                  type="button"
-                  onClick={() => { setViewPlanId(null); setEditPlan(false) }}
-                  className="inline-flex items-center gap-1 rounded px-2 py-1 text-[11px] text-slate-500 transition hover:bg-slate-100 hover:text-slate-700"
-                >
-                  <X className="h-3 w-3" /> Về form tạo
-                </button>
-              </div>
+              {/* 🧊 [S177 — anh: "bỏ nút sửa với về lại form"] Dải 2 nút góc phải ĐÃ GỠ TRỌN
+                  (**Sửa** + **✕ Về form tạo**). Cả hai đều là đường PHỤ, không phải đường duy nhất:
+                    · **vào chế-độ sửa** → bút chì ở DANH SÁCH trái (`onEditPlan` `:202`) — GIỮ.
+                      🔴 Bút chì đó là đường DUY NHẤT vào chế-độ sửa; gỡ nó là mất hẳn khả năng
+                      sửa phiếu, nên nó KHÔNG nằm trong phạm vi yêu cầu này.
+                    · **rời chế-độ xem** → bấm phiếu Duyệt NCC bất kỳ ở cây trái: `pickPe` `:163-166`
+                      tự `setViewPlanId(null)`. Cây trái luôn hiện ⇒ không kẹt.
+                  🔸 Đính chính chú-thích S175 từng đứng đây (*"bỏ hẳn thì người dùng kẹt, không
+                  có đường lùi"*): SAI ngay lúc viết — `pickPe` mang nhãn **[S174]**, tức đã tồn
+                  tại TRƯỚC câu cảnh-báo đó. Thứ duy nhất mất đi là đường quay lại màn rỗng
+                  "Chọn phiếu Duyệt NCC…" (`:256`), mà đó chỉ là chỗ hướng-dẫn, không phải đích. */}
               {viewPlan.isLoading && <div className="text-sm text-slate-500">Đang tải…</div>}
               {!viewPlan.isLoading && !viewPlan.data && (
                 <div className="text-sm text-red-600">Không tìm thấy phiếu.</div>