[CLAUDE] Contract: K2 SP-002 phieu KHKK mang hang-muc + nhom duyet N1-8 (Mig 71) + FE x2 app + 11 test

Mig 71 AddKhkkApprovalGroupCatalogAndFinalizeRuntime: +ApprovalGroup (backfill=1)
+EndedByLevelFinalize (K2 de, K3 tieu - ghost-window khai) + Line +CatalogEntryId/
TenHangMuc + unique (Plan,Supplier,CatalogEntry) filtered IsDeleted=0. Rao
1-PE-1-phieu doi (PeId,ApprovalGroup) 2 site + picker OG-7 ExistingGroups + nut
'Tao them cho nhom khac'. Submit-guard va-5 (CHAN null, thang nen cho-qua-legacy;
ghost-window K2->K4b khai) + dem-so-khop (gate F-1: bit duong hang-muc xoa-mem).
List ?group= end-to-end + Tong-Approved list (va-8). FE: select nhom default 1 +
badge N{g} + cot Hang-muc + cot Tong-duyet, SHA-pair 5/5. Gate K2 PASS-WITH-FLAGS
10f: F-1 guard fix + 2 test bit (xoa-mem chan + reflection ?group=); F-2/F-5/F-7/
F-8/F-9 comment-honest; F-3/F-4 docs-delta. Suite 609/0 (45D+564I). Wave co #53 x5,
artifact + relaunch-cat-got cuu 100% (0 mat cong).

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

fe-admin/src/pages/khkk/KhkkDetailPage.tsx

@@ -26,7 +26,8 @@ import { getErrorMessage } from '@/lib/apiError'
 import { cn } from '@/lib/cn'
 import {
   DOSSIER_KIND_LABELS, DOSSIER_STATUS_BADGE, DOSSIER_STATUS_LABELS,
-  DossierItemKind, DossierItemStatus, KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
+  DossierItemKind, DossierItemStatus, KHKK_APPROVAL_GROUP_LABELS,
+  KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
   KhkkAttachmentPurpose, KhkkPhase,
   type DossierItemKindValue, type DossierItemStatusValue, type KhkkAttachmentDto,
   type KhkkDetailDto, type KhkkDossierItemDto, type KhkkPhaseValue,
@@ -290,6 +291,18 @@ export function KhkkDetailPage() {
         accent="brand"
         actions={
           <>
+            {/* [K2 S164] Badge NHÓM DUYỆT — đứng TRƯỚC badge phase vì nhóm là thứ quyết
+                phiếu đi đường nào (8 quy trình khác nhau), phase chỉ là chỗ đang đứng.
+                `!= null` guard: phiếu nạp từ cache trước K2 chưa có field ⇒ đừng in
+                "Nundefined" (bài "vắng-mặt trông giống ổn"). */}
+            {k.approvalGroup != null && (
+              <span
+                className="inline-flex items-center rounded-md border border-violet-300 bg-violet-100 px-2.5 py-1 text-xs font-semibold text-violet-800"
+                title={KHKK_APPROVAL_GROUP_LABELS[k.approvalGroup] ?? `Nhóm ${k.approvalGroup}`}
+              >
+                N{k.approvalGroup}
+              </span>
+            )}
             <span
               className={cn(
                 'inline-flex items-center rounded-md border px-2.5 py-1 text-xs font-medium',
@@ -423,6 +436,16 @@ export function KhkkDetailPage() {
         chipBg="var(--color-teal-50)"
         chipFg="var(--color-teal-700)"
         count={k.lines.length}
+        actions={
+          // [K2 S164 — QĐ-9] `budgetFrozen` = cờ HIỂN THỊ do BE dẫn xuất từ phase
+          // (`DetailDto:166`). Số đã đóng băng ở tầng dữ liệu bởi `ApprovedAmount ??=`
+          // tại choke-point finalize — badge này chỉ nói cho người dùng biết điều đó.
+          k.budgetFrozen ? (
+            <span className="inline-flex items-center rounded-md border border-amber-300 bg-amber-100 px-2 py-0.5 text-[11px] font-semibold normal-case tracking-normal text-amber-800">
+              🔒 Giá đã chốt tại thời điểm duyệt
+            </span>
+          ) : undefined
+        }
       >
         {k.lines.length === 0 ? (
           <div className="text-sm text-muted-foreground">Phiếu nguồn chưa có NCC trúng thầu.</div>
@@ -431,6 +454,10 @@ export function KhkkDetailPage() {
             <thead className="border-b border-slate-200 bg-slate-50/70">
               <tr>
                 <th className="label-eyebrow px-3 py-2 text-left">Nhà cung cấp</th>
+                {/* [K2 S164] Hạng mục SP-002 của dòng — HIỂN THỊ-ONLY lượt này.
+                    Đường GÁN (Lines-editor) = **K4b**; K2 chỉ đẻ cột + cho thấy dòng
+                    nào còn trống (dòng trống KHÔNG trình duyệt được — submit-guard BE). */}
+                <th className="label-eyebrow px-3 py-2 text-left">Hạng mục</th>
                 <th className="label-eyebrow px-3 py-2 text-right">Giá tham chiếu (phiếu NCC)</th>
                 <th className="label-eyebrow px-3 py-2 text-right">Giá đề xuất</th>
                 <th className="label-eyebrow px-3 py-2 text-right">Giá duyệt</th>
@@ -441,6 +468,9 @@ export function KhkkDetailPage() {
               {k.lines.map((l) => (
                 <tr key={l.id} className="border-b border-slate-100 last:border-0">
                   <td className="px-3 py-2 font-medium text-brand-800">{l.supplierName ?? '—'}</td>
+                  <td className="px-3 py-2 text-xs text-slate-700">
+                    {l.tenHangMuc ? l.tenHangMuc : <span className="text-slate-300">—</span>}
+                  </td>
                   <td className="px-3 py-2 text-right tabular-nums text-slate-600">{formatVnd(l.peReferenceAmount)}</td>
                   <td className="px-3 py-2 text-right tabular-nums text-brand-800">{formatVnd(l.proposedAmount)}</td>
                   <td className="px-3 py-2 text-right tabular-nums text-emerald-700">{formatVnd(l.approvedAmount)}</td>
@@ -452,6 +482,7 @@ export function KhkkDetailPage() {
         )}
         <div className="mt-3 text-xs text-muted-foreground">
           Giá tham chiếu là SNAPSHOT tổng báo giá được chọn của NCC trên phiếu Duyệt NCC tại thời điểm lập kế hoạch.
+          {' '}Cột Hạng mục hiện chưa gán được từ màn này (ô gán thuộc bước Lines-editor).
         </div>
       </SectionCard>