From 99cabd8ebe18c661cb4d8922f2cbd8703235f4f4 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Wed, 5 Aug 2026 21:47:12 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20Contract:=20KHKK=20UAT=20S175=20dot-?=
 =?UTF-8?q?F=20=E2=80=94=20gom=20nut=20thao=20tac=20+=20hang=20muc=20du=20?=
 =?UTF-8?q?an=20+=20loc=20nhom=20(0-mig)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Anh review truc tiep tren prod, khoanh do tung cho. Land tron cum:

=== 1. GOM NUT THAO TAC (anh: "Bo het di" + "phia duoi them cac nut thao tac"
       + "cho menu dang duyet -> Duyet/Tra lai vay thoi") ===
· THANH NUT DAY moi o `KhkkDetailContent` (sticky bottom-0, khuon PE workspace):
  [Xoa phieu] · dong "Cac thay doi da tu dong luu" · [Luu & Gui duyet ->]
· Panel 3 GO "Gui duyet" + "Xoa phieu" => nay CHI con **Duyet / Tra lai**.
· GO nut "+ Lap ke hoach" (header) · nut "Sua" (muc 1) · dai banner "Dang xem ke hoach".
🔴 THU TU CO CHU DICH: KHONG go "Gui duyet" o panel 3 TRUOC khi thanh day co mat — go truoc
  la nguoi soan mat duong trinh duyet, phieu ket o Nhap. Vi vay ca cum di CHUNG 1 commit.
🔴 Thanh day chi om nhanh **Submit** — nhanh Approve/Return (o-tich level-finalize + upload
  file sau transition) O LAI panel 3. Nhan ban nhanh do sang day la de su-that thu hai cho
  duong DUYET.
🔸 KHONG lam nut "Luu" roi: moi o o man nay luu NGAY khi roi o. Them nut khong lam gi la
  hua hao — noi thang bang dong chu ben canh thay vi ve nut gia.
🔸 Giu lai dung 1 dong nho "Ve form tao" — bo han thi mo 1 phieu la ket, khong co duong lui.
· `onDeleted` noi vao ca 3 host (List / Create / Detail) de xoa xong khong dung o phieu ma.

=== 2. HANG MUC CUA DU AN (anh: "hang muc cua Du an -. Duyet NCC ay") ===
🔴 Lead bay NHAM o luot truoc: bay `line.tenHangMuc` = danh-muc **SP-002** (86 dong, dung
  phan loai HOP DONG). Anh muon **hang muc CONG VIEC cua du an** tu phieu Duyet NCC
  (`PE.WorkItemId`). Hai thu trung ten tieng Viet nhung KHAC TRUC — tron la chi sai goi thau.
· BE: `ContractSigningPlanDetailDto` +`PeWorkItemName`; handler join `WorkItems` (loose-Guid
  Mig 49, KHONG FK vat ly => join tay null-safe).
· FE: o "Hang muc (du an)" doc `plan.peWorkItemName`; go het khoi liet-ke SP-002 khoi muc 1.

=== 3. MUC 2 RUT VE "HANG MUC + GIA -> TONG" ===
Anh: "Cho nay doi lai la hang muc la dc roi, chon hang muc tien -> thanh tong con lai bo het"
 + "cho chon nhieu dong nhap gia thanh gia tong, ko can so sanh j voi so duyet PRO hay CCM".
· Tieu de: "2. Gia de xuat theo NCC trung thau" -> "2. Hang muc".
· Cot: 6 -> 3 (HANG MUC | GIA | thao-tac). GO **Nha cung cap · Gia tham chieu · Gia duyet**.
· Ghi chu xuong DONG PHU duoi o hang muc (van nhap duoc, khong chiem cot).
· +hang TONG = Sigma gia cac dong.
🔸 Du-lieu 2 cot go di VAN trong DTO; `peReferenceAmount` con dung lam DAU phan biet
  dong-goc / dong-them-tay o nut xoa.

=== 4. LOC THEO NHOM (anh: "Loc theo quy trinh luon") ===
Tang duoi man Thao tac hien phieu N1/N7 trong khi dang dung o leaf N2 => doc nham "nhom nay
dang co viec". Nay loc theo `approvalGroup` cua leaf menu. `group == null` => khong loc
(giu duong cu cho host khong truyen).

=== 5. GO DAI ACCENT + 2 O LINK HO SO/GHI CHU ===
· `card-accent` boc `KhkkDetailContent` GO HAN (dai xanh doc man Thao tac). GO CLASS chu
  KHONG de `border-0` — class nay ngoai `@layer` nen thang utility (gotcha #66).
· Khoi "Link ho so + Ghi chu" GO TRON ca 2 nhanh ternary. Luot truoc lead moi go o luoi tren
  nen 2 o van hien o khoi duoi — anh chup lai dung cho do.

=== CON NO ===
🔴 Cay man Thao tac: anh muon **Nam > Du an > Hang muc > 4 giai doan** (giong cay o man Danh
  sach). Hien moi co Du an > Hang muc (gap/mo duoc). Chua land.
🔴 CHUA soi mat prod 375/1366/1440.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/components/khkk/KhkkDetailContent.tsx | 314 +++++++++---------
 .../src/components/khkk/KhkkWorkListPanel.tsx |  10 +-
 .../src/components/khkk/KhkkWorkflowPanel.tsx |  38 +--
 fe-admin/src/pages/khkk/KhkkCreatePage.tsx    |  60 ++--
 fe-admin/src/pages/khkk/KhkkDetailPage.tsx    |   2 +-
 fe-admin/src/pages/khkk/KhkkListPage.tsx      |  15 +-
 fe-admin/src/types/khkk.ts                    |   3 +
 .../src/components/khkk/KhkkDetailContent.tsx | 314 +++++++++---------
 .../src/components/khkk/KhkkWorkListPanel.tsx |  10 +-
 .../src/components/khkk/KhkkWorkflowPanel.tsx |  38 +--
 fe-user/src/pages/khkk/KhkkCreatePage.tsx     |  60 ++--
 fe-user/src/pages/khkk/KhkkDetailPage.tsx     |   2 +-
 fe-user/src/pages/khkk/KhkkListPage.tsx       |  15 +-
 fe-user/src/types/khkk.ts                     |   3 +
 .../ContractSigningPlanFeatures.cs            |  17 +-
 15 files changed, 430 insertions(+), 471 deletions(-)

diff --git a/fe-admin/src/components/khkk/KhkkDetailContent.tsx b/fe-admin/src/components/khkk/KhkkDetailContent.tsx
index 64c7a12..d8dd535 100644
--- a/fe-admin/src/components/khkk/KhkkDetailContent.tsx
+++ b/fe-admin/src/components/khkk/KhkkDetailContent.tsx
@@ -21,7 +21,7 @@
 import { useState, type ReactNode } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  ClipboardList, Download, Eye, FileCheck, Lock, Paperclip, Pencil, Plus, Save, Trash2, Upload, Users,
+  ClipboardList, Download, Eye, FileCheck, Lock, Paperclip, Pencil, Plus, Trash2, Upload, Users,
 } from 'lucide-react'
 // [S175] Dùng LẠI dialog xem-trước của PE (đã có prop `basePath` từ đợt B) thay vì dựng bản
 // thứ hai cho KHKK — 2 bản = 2 sự thật, sửa 1 chỗ quên chỗ kia.
@@ -40,7 +40,7 @@ import {
   DOSSIER_KIND_LABELS, DOSSIER_STATUS_BADGE, DOSSIER_STATUS_LABELS,
   DossierItemKind, DossierItemStatus,
   KHKK_APPROVAL_GROUP_LABELS, KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
-  KhkkAttachmentPurpose, KhkkPhase,
+  KhkkAttachmentPurpose, KhkkPhase, KhkkTransitionAction, type KhkkTransitionInput,
   type DossierItemKindValue, type DossierItemStatusValue, type KhkkAttachmentDto,
   type KhkkDetailDto, type KhkkDossierItemDto, type KhkkPhaseValue,
   type UpsertKhkkDossierItemInput,
@@ -149,17 +149,17 @@ export function KhkkDetailContent({
   plan,
   readOnly,
   onChanged,
+  onDeleted,
 }: {
   plan: KhkkDetailDto
   /** [P2-7] Host quyết: `true` khi phiếu ≠ Nháp/Trả lại HOẶC user ≠ người soạn. */
   readOnly: boolean
   onChanged?: () => void
+  /** [S175] Gọi sau khi XÓA phiếu ở thanh nút đáy — host bỏ chọn / quay về danh sách. */
+  onDeleted?: () => void
 }) {
   const qc = useQueryClient()
   const id = plan.id
-  const [editHeader, setEditHeader] = useState(false)
-  const [ghiChu, setGhiChu] = useState('')
-  const [hoSoLink, setHoSoLink] = useState('')
   const [itemForm, setItemForm] = useState<UpsertKhkkDossierItemInput | null>(null)
   // [S175] File đang xem-trước inline trong khối "File đính kèm" đã gộp.
   const [previewAtt, setPreviewAtt] = useState<KhkkAttachmentDto | null>(null)
@@ -180,16 +180,6 @@ export function KhkkDetailContent({
     onChanged?.()
   }
 
-  const saveHeader = useMutation({
-    mutationFn: async () => {
-      await api.put(`/contract-signing-plans/${id}`, {
-        ghiChu: ghiChu.trim() || null,
-        hoSoLink: hoSoLink.trim() || null,
-      })
-    },
-    onSuccess: () => { toast.success('Đã lưu'); setEditHeader(false); invalidate() },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  })
 
   // Danh mục hạng mục SP-002 — chỉ tải khi phiếu còn sửa được (tránh 1 request thừa).
   const catalogOptions = useQuery({
@@ -234,6 +224,26 @@ export function KhkkDetailContent({
     onError: (e) => toast.error(getErrorMessage(e)),
   })
 
+  // [S175 — anh: "phía dưới thêm các nút thao tác"] 2 mutation cho THANH NÚT ĐÁY.
+  // 🔴 CỐ Ý chỉ ôm nhánh **Submit** — nhánh Approve/Return có máy phức tạp (ô-tích
+  // level-finalize + upload file đính kèm SAU khi transition thành công) và nó ở LẠI
+  // `KhkkWorkflowPanel`. Nhân bản nhánh đó sang đây là đẻ sự-thật thứ hai cho đường DUYỆT;
+  // nhánh Submit thì chỉ có đúng `action` + `comment: null` nên bê là an toàn.
+  const submitPlan = useMutation({
+    mutationFn: async () => {
+      const body: KhkkTransitionInput = { action: KhkkTransitionAction.Submit, comment: null }
+      return api.post(`/contract-signing-plans/${id}/transitions`, body)
+    },
+    onSuccess: () => { toast.success('Đã gửi duyệt'); invalidate(); onChanged?.() },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  })
+
+  const deletePlan = useMutation({
+    mutationFn: async () => api.delete(`/contract-signing-plans/${id}`),
+    onSuccess: () => { toast.success('Đã xóa phiếu'); onDeleted?.() },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  })
+
   const upsertItem = useMutation({
     mutationFn: async (body: UpsertKhkkDossierItemInput) => {
       if (!body.name.trim()) throw new Error('Vui lòng nhập tên căn cứ')
@@ -306,11 +316,6 @@ export function KhkkDetailContent({
     }
   }
 
-  const startEditHeader = () => {
-    setGhiChu(plan.ghiChu ?? '')
-    setHoSoLink(plan.hoSoLink ?? '')
-    setEditHeader(true)
-  }
 
   // File "đính kèm khi duyệt" thuộc panel 3 (mục 5) — Section 4 chỉ liệt kê hồ-sơ của phiếu.
   // [S175 · O4] Chia 2 rổ: file GẮN VÀO một căn cứ hiện ngay dưới dòng căn cứ đó; Section 4
@@ -403,6 +408,11 @@ export function KhkkDetailContent({
 
       <div className="divide-y divide-slate-200">
         {/* ─────────────── 1 ─────────────── */}
+        {/* 🧊 [S175 — anh: "Bỏ hết đi"] Nút "Sửa" ĐÃ GỠ khỏi `actions`. Nó chỉ mở form 2 trường
+            **Link hồ sơ + Ghi chú** — mà chính 2 trường đó anh cũng bảo bỏ khỏi màn ở cùng lượt.
+            Giữ nút mở form sửa một thứ không còn hiển thị ở đâu là mâu thuẫn.
+            🔸 Máy KHÔNG mất: `hoSoLink`/`ghiChu` vẫn nằm trong DTO + BE
+            (`UpdateContractSigningPlanDraftCommand`), muốn bày lại chỉ là thêm chỗ vẽ. */}
         <Section
           title="1. Thông tin kế hoạch"
           icon={<FileCheck className="h-4 w-4" />}
@@ -410,13 +420,6 @@ export function KhkkDetailContent({
           head="text-brand-800"
           chipBg="var(--color-brand-50)"
           chipFg="var(--color-brand-600)"
-          actions={
-            isDraft && !editHeader ? (
-              <Button variant="outline" size="sm" onClick={startEditHeader}>
-                <Pencil className="mr-2 h-3.5 w-3.5" /> Sửa
-              </Button>
-            ) : undefined
-          }
         >
           {/* [S175 — anh chốt trên ảnh khoanh đỏ] Mục 1 RÚT GỌN còn 4 ô:
               · "Bỏ hết đi" → GỠ **Phòng ban · Quy trình · Hạn xử lý**
@@ -428,68 +431,25 @@ export function KhkkDetailContent({
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
             <Field label="Mã kế hoạch" value={plan.maKeHoach ?? '—'} mono />
             <Field label="Dự án" value={plan.projectName ?? '—'} />
-            {/* 1 phiếu nay được N hạng mục (S175) ⇒ liệt kê DUY-NHẤT, giữ thứ tự dòng.
-                Dòng chưa gán KHÔNG bịa tên — đếm riêng để người soạn biết còn nợ mấy dòng,
-                vì submit-guard sẽ chặn trình duyệt khi còn dòng chưa gán. */}
-            <Field label="Hạng mục" full>
-              {(() => {
-                const names = [...new Set(plan.lines.map(l => l.tenHangMuc).filter(Boolean))] as string[]
-                const unassigned = plan.lines.filter(l => !l.catalogEntryId).length
-                if (names.length === 0 && unassigned === 0) return DASH
-                return (
-                  <span className="flex flex-wrap items-center gap-1">
-                    {names.map(n => (
-                      <span key={n} className="inline-flex items-center rounded bg-brand-50 px-1.5 py-0.5 text-[11px] font-medium text-brand-700">
-                        {n}
-                      </span>
-                    ))}
-                    {unassigned > 0 && (
-                      <span className="inline-flex items-center rounded bg-amber-100 px-1.5 py-0.5 text-[11px] font-medium text-amber-800">
-                        còn {unassigned} dòng chưa gán
-                      </span>
-                    )}
-                  </span>
-                )
-              })()}
-            </Field>
+            {/* [S175 — anh: "hạng mục của Dự án, Duyệt NCC ấy"] Đây là HẠNG MỤC CÔNG VIỆC của
+                dự án, lấy từ phiếu Duyệt NCC nguồn (`PE.WorkItemId`).
+                🔴 KHÁC hẳn `line.tenHangMuc` — cái đó là danh-mục SP-002 dùng phân loại HỢP
+                ĐỒNG (86 dòng, chọn ở mục 2). Hai thứ trùng tên tiếng Việt nhưng khác trục;
+                lượt trước lead bày nhầm cái SP-002 ở đây nên anh bảo "Bỏ đi". */}
+            <Field label="Hạng mục (dự án)" value={plan.peWorkItemName ?? '—'} />
             <Field label="Người soạn" value={plan.drafterFullName ?? '—'} />
             <Field label="Ngày tạo" value={formatDateTime(plan.createdAt)} />
           </div>
 
-          {editHeader ? (
-            <div className="mt-4 space-y-3 rounded-lg border border-slate-200 bg-slate-50/60 p-4">
-              <div>
-                <Label htmlFor="hoSoLink">Link hồ sơ (NAS)</Label>
-                <Input id="hoSoLink" value={hoSoLink} onChange={(e) => setHoSoLink(e.target.value)} maxLength={1000} placeholder="\\\\nas\\du-an\\..." />
-              </div>
-              <div>
-                <Label htmlFor="ghiChu">Ghi chú</Label>
-                <Textarea id="ghiChu" value={ghiChu} onChange={(e) => setGhiChu(e.target.value)} maxLength={2000} rows={4} />
-                <div className="mt-1 text-xs text-muted-foreground">{ghiChu.length}/2000</div>
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" size="sm" onClick={() => setEditHeader(false)}>Huỷ</Button>
-                <Button size="sm" onClick={() => saveHeader.mutate()} disabled={saveHeader.isPending}>
-                  <Save className="mr-2 h-3.5 w-3.5" />
-                  {saveHeader.isPending ? 'Đang lưu...' : 'Lưu'}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
-              <Field label="Link hồ sơ" full>
-                {plan.hoSoLink ? <span className="break-all font-normal text-slate-700">{plan.hoSoLink}</span> : <span className="text-slate-300">—</span>}
-              </Field>
-              <Field label="Ghi chú" full>
-                {plan.ghiChu ? <span className="whitespace-pre-wrap font-normal text-slate-700">{plan.ghiChu}</span> : <span className="text-slate-300">—</span>}
-              </Field>
-            </div>
-          )}
+          {/* 🧊 [S175 — anh: "Bỏ đi"] Khối **Link hồ sơ + Ghi chú** (cả ô XEM lẫn form SỬA)
+              ĐÃ GỠ. Lượt trước lead mới gỡ ở lưới trên nên 2 ô này VẪN HIỆN ở khối dưới —
+              anh chụp lại đúng chỗ đó. Nay gỡ trọn cả 2 nhánh của ternary.
+              🔸 Máy KHÔNG mất: hoSoLink / ghiChu còn nguyên trong DTO + BE. */}
         </Section>
 
         {/* ─────────────── 2 ─────────────── */}
         <Section
-          title={`2. Giá đề xuất theo NCC trúng thầu (${plan.lines.length} dòng)`}
+          title={`2. Hạng mục (${plan.lines.length} dòng)`}
           icon={<Users className="h-4 w-4" />}
           accent="var(--color-teal-500)"
           head="text-teal-700"
@@ -520,34 +480,20 @@ export function KhkkDetailContent({
             <div className="overflow-x-auto">
               <table className="w-full min-w-[880px] table-fixed text-xs">
                 <colgroup>
-                  <col className="w-[22%]" />
-                  <col className="w-[22%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
+                  <col className="w-[52%]" />
+                  <col className="w-[32%]" />
+                  <col className="w-[16%]" />
                 </colgroup>
                 <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>
                     <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</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>
-                    <th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
+                    <th className="label-eyebrow px-3 py-2 text-right">Giá</th>
+                    <th className="label-eyebrow px-3 py-2 text-right"></th>
                   </tr>
                 </thead>
                 <tbody>
                   {plan.lines.map((l) => (
                     <tr key={l.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/60">
-                      <td className="px-3 py-2 font-medium text-brand-800">
-                        {orDash(l.supplierName)}
-                        {l.contractId && (
-                          <a href={`/contracts/${l.contractId}`} className="ml-2 text-[10px] font-medium text-brand-600 hover:underline" title="Dòng này đã được đưa vào hợp đồng">
-                            ✓ HĐ
-                          </a>
-                        )}
-                      </td>
                       <td className="px-3 py-2 text-slate-700">
                         {isDraft && !l.contractId ? (
                           <>
@@ -555,12 +501,10 @@ export function KhkkDetailContent({
                               value={l.catalogEntryId ?? ''}
                               onChange={(e) => e.target.value && assignLine.mutate({ lineId: l.id, catalogEntryId: e.target.value })}
                               disabled={assignLine.isPending}
-                              aria-label={`Gán hạng mục SP-002 cho dòng ${l.supplierName ?? l.id}`}
-                              className="h-8 w-full min-w-[12rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
+                              aria-label={`Chọn hạng mục cho dòng ${l.id}`}
+                              className="h-8 w-full rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
                             >
                               <option value="">— Chọn hạng mục —</option>
-                              {/* Hạng mục ĐÃ LƯU mà không có trong options ⇒ chèn option đại diện,
-                                  không thì dòng đã gán TRÔNG như chưa gán. */}
                               {l.catalogEntryId && !(catalogOptions.data ?? []).some((c) => c.id === l.catalogEntryId) && (
                                 <option value={l.catalogEntryId}>{l.tenHangMuc ?? '(hạng mục đã gán)'}</option>
                               )}
@@ -568,30 +512,30 @@ export function KhkkDetailContent({
                                 <option key={c.id} value={c.id}>{c.code} — {c.tenVi}</option>
                               ))}
                             </select>
-                            {catalogOptions.isError && (
-                              <div className="mt-1 text-[11px] text-red-600">
-                                Không tải được danh mục hạng mục —{' '}
-                                <button type="button" className="underline" onClick={() => catalogOptions.refetch()}>thử lại</button>
-                              </div>
-                            )}
-                            {catalogOptions.isSuccess && (catalogOptions.data?.length ?? 0) === 0 && (
-                              <div className="mt-1 text-[11px] text-amber-700">
-                                Nhóm duyệt N{plan.approvalGroup} chưa có hạng mục đang hiệu lực — liên hệ quản trị danh mục.
-                              </div>
-                            )}
+                            {/* Ghi chú xuống DÒNG PHỤ thay vì chiếm 1 cột — anh chốt bảng chỉ
+                                còn "hạng mục + giá", nhưng ghi chú thì anh vẫn muốn nhập được. */}
+                            <input
+                              type="text"
+                              maxLength={1000}
+                              defaultValue={l.note ?? ''}
+                              placeholder="Ghi chú (tùy chọn)…"
+                              disabled={saveLineField.isPending}
+                              aria-label="Ghi chú dòng"
+                              onBlur={(e) => {
+                                const v = e.target.value.trim()
+                                if (v !== (l.note ?? '')) saveLineField.mutate({ lineId: l.id, note: v })
+                              }}
+                              className="mt-1 h-7 w-full rounded border border-transparent bg-transparent px-2 text-[11px] text-slate-500 hover:border-slate-200 focus-visible:border-brand-500 focus-visible:bg-white focus-visible:outline-none"
+                            />
                           </>
-                        ) : orDash(l.tenHangMuc)}
+                        ) : (
+                          <>
+                            <div>{orDash(l.tenHangMuc)}</div>
+                            {l.note && <div className="mt-0.5 text-[11px] text-slate-500">{l.note}</div>}
+                          </>
+                        )}
                       </td>
-                      {/* Dòng THÊM TAY có `peReferenceAmount = 0` — BE cố ý KHÔNG copy số tham
-                          chiếu của NCC (đã nằm trọn ở dòng gốc), lặp lại là đếm đôi. Hiện
-                          em-dash mờ thay vì "0 đ" để không đọc nhầm thành "tham chiếu bằng 0". */}
-                      <td className="px-3 py-2 text-right tabular-nums text-slate-600">
-                        {l.peReferenceAmount === 0 ? DASH : formatVnd(l.peReferenceAmount)}
-                      </td>
-                      {/* [S175] GIÁ ĐỀ XUẤT nhập tay — anh chốt "nhiều hạng mục → giá và ghi chú".
-                          Lưu khi rời ô (onBlur) và chỉ khi SỐ ĐỔI THẬT, tránh bắn 1 request mỗi
-                          lần click vào rồi click ra. */}
-                      <td className="px-3 py-2 text-right tabular-nums text-brand-800">
+                      <td className="px-3 py-2 text-right align-top tabular-nums text-brand-800">
                         {isDraft && !l.contractId ? (
                           <input
                             type="number"
@@ -599,52 +543,46 @@ export function KhkkDetailContent({
                             step={1000}
                             defaultValue={l.proposedAmount}
                             disabled={saveLineField.isPending}
-                            aria-label={`Giá đề xuất dòng ${l.tenHangMuc ?? l.supplierName ?? l.id}`}
+                            aria-label="Giá của hạng mục"
                             onBlur={(e) => {
                               const v = Number(e.target.value)
                               if (!Number.isFinite(v) || v < 0) { e.target.value = String(l.proposedAmount); return }
                               if (v !== l.proposedAmount) saveLineField.mutate({ lineId: l.id, proposedAmount: v })
                             }}
-                            className="h-8 w-full min-w-[7rem] rounded-md border border-slate-200 bg-white px-2 text-right text-xs tabular-nums text-brand-800 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
+                            className="h-8 w-full rounded-md border border-slate-200 bg-white px-2 text-right text-xs tabular-nums text-brand-800 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
                           />
                         ) : moneyOrDash(l.proposedAmount)}
                       </td>
-                      <td className="px-3 py-2 text-right tabular-nums text-emerald-700">{moneyOrDash(l.approvedAmount)}</td>
-                      <td className="px-3 py-2 text-slate-600">
-                        {isDraft && !l.contractId ? (
-                          <div className="flex items-center gap-1">
-                            <input
-                              type="text"
-                              maxLength={1000}
-                              defaultValue={l.note ?? ''}
-                              placeholder="Ghi chú…"
-                              disabled={saveLineField.isPending}
-                              aria-label={`Ghi chú dòng ${l.tenHangMuc ?? l.supplierName ?? l.id}`}
-                              onBlur={(e) => {
-                                const v = e.target.value.trim()
-                                if (v !== (l.note ?? '')) saveLineField.mutate({ lineId: l.id, note: v })
-                              }}
-                              className="h-8 w-full min-w-[6rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
-                            />
-                            {/* Chỉ dòng THÊM TAY mới xoá được. Dòng gốc sinh từ phiếu Duyệt NCC
-                                mang snapshot tham chiếu — BE cũng chặn, đây chỉ là không mời bấm. */}
-                            {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="shrink-0 rounded px-1 py-1 text-red-500 hover:bg-red-50"
-                              >
-                                <Trash2 className="h-3.5 w-3.5" />
-                              </button>
-                            )}
-                          </div>
-                        ) : orDash(l.note)}
+                      <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>
                   ))}
                 </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
+                    sánh j với số duyệt PRO hay CCM j cả". Dữ-liệu 2 cột đó VẪN nằm trong DTO
+                    (`peReferenceAmount` / `approvedAmount`), chỉ bỏ chỗ vẽ; `peReferenceAmount`
+                    còn được dùng làm DẤU phân biệt dòng-gốc ⟂ dòng-thêm-tay ở nút xoá trên. */}
+                <tfoot>
+                  <tr className="border-t-2 border-slate-300 bg-slate-50">
+                    <td className="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wide text-slate-600">Tổng</td>
+                    <td className="px-3 py-2 text-right text-sm font-bold tabular-nums text-brand-800">
+                      {formatVnd(plan.lines.reduce((s, l) => s + (l.proposedAmount ?? 0), 0))}
+                    </td>
+                    <td />
+                  </tr>
+                </tfoot>
               </table>
             </div>
 
@@ -939,6 +877,62 @@ export function KhkkDetailContent({
           </div>
         )}
       </Dialog>
+
+      {/* [S175 — anh: "phía dưới thêm các nút thao tác"] THANH NÚT ĐÁY, khuôn PE workspace.
+          Gom về ĐÂY những nút anh bảo gỡ khỏi chỗ khác: "Gửi duyệt" + "Xóa phiếu" (trước ở
+          khối HÀNH ĐỘNG panel 3). Panel 3 từ nay chỉ còn **Duyệt / Trả lại** — đúng câu anh
+          chốt "chỗ menu đang duyệt → Duyệt/Trả lại vậy thôi".
+          🔴 `sticky bottom-0`: phiếu dài, nút nằm cuối trang thì phải cuộn hết mới thấy —
+          dính đáy là để lúc nào cũng với tới được.
+          🔸 KHÔNG có nút "Lưu" rời: mọi ô ở màn này lưu NGAY khi rời ô (hạng mục / giá / ghi
+          chú / file). Thêm một nút "Lưu" không làm gì là hứa hão — nói thẳng bằng dòng chữ
+          bên cạnh thay vì vẽ nút giả. */}
+      {!readOnly && (
+        <div className="sticky bottom-0 z-10 flex flex-wrap items-center gap-3 border-t border-slate-200 bg-white/95 px-5 py-3 backdrop-blur">
+          <button
+            type="button"
+            onClick={() => {
+              if (window.confirm(`Xóa phiếu ${plan.maKeHoach ?? ''}? Phiếu chuyển sang mục "Đã xóa".`)) deletePlan.mutate()
+            }}
+            disabled={deletePlan.isPending}
+            className="inline-flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-red-700 disabled:opacity-50"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            {deletePlan.isPending ? 'Đang xóa…' : 'Xóa phiếu'}
+          </button>
+
+          <span className="min-w-0 flex-1 text-[12px] text-emerald-700">
+            ✓ Các thay đổi đã tự động lưu khi chỉnh sửa từng phần.
+          </span>
+
+          {(() => {
+            // Rào HIỂN THỊ mirror submit-guard BE: chưa pin quy trình, hoặc còn dòng chưa gán
+            // hạng mục ⇒ BE sẽ chặn. Nói TRƯỚC lý do thay vì để bấm rồi ăn 409.
+            const unassigned = plan.lines.filter(l => !l.catalogEntryId).length
+            const noWorkflow = !plan.approvalWorkflowId
+            const blocked = noWorkflow || unassigned > 0 || plan.lines.length === 0
+            const why = noWorkflow ? 'Chưa pin quy trình duyệt cho phiếu.'
+              : plan.lines.length === 0 ? 'Phiếu chưa có dòng NCC nào.'
+                : unassigned > 0 ? `Còn ${unassigned} dòng chưa gán hạng mục.`
+                  : undefined
+            return (
+              <button
+                type="button"
+                onClick={() => { if (!blocked) submitPlan.mutate() }}
+                disabled={blocked || submitPlan.isPending}
+                title={why ?? 'Gửi phiếu vào quy trình duyệt'}
+                className={cn(
+                  'inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-semibold text-white transition',
+                  blocked ? 'cursor-not-allowed bg-slate-300' : 'bg-brand-600 hover:bg-brand-700',
+                  submitPlan.isPending && 'opacity-50',
+                )}
+              >
+                {submitPlan.isPending ? 'Đang gửi…' : 'Lưu & Gửi duyệt →'}
+              </button>
+            )
+          })()}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/fe-admin/src/components/khkk/KhkkWorkListPanel.tsx b/fe-admin/src/components/khkk/KhkkWorkListPanel.tsx
index 6285d6c..3379f83 100644
--- a/fe-admin/src/components/khkk/KhkkWorkListPanel.tsx
+++ b/fe-admin/src/components/khkk/KhkkWorkListPanel.tsx
@@ -81,6 +81,7 @@ export function KhkkWorkListPanel({
   selectedPeId,
   selectedPlanId,
   onEditPlan,
+  group,
 }: {
   /** Bấm PE ở tầng trên → host nạp phiếu đó vào form tạo (Ở LẠI màn, không điều hướng). */
   onPickPe: (peId: string) => void
@@ -92,6 +93,10 @@ export function KhkkWorkListPanel({
   /** [S175 · O7] Bấm bút chì trên card KHKK → host mở phiếu ở chế-độ SỬA. Không truyền ⇒
    *  không vẽ bút chì (cột giữ đúng hình cũ). */
   onEditPlan?: (planId: string) => void
+  /** [S175 - anh: "Loc theo quy trinh luon"] Nhom duyet cua leaf menu dang dung.
+   *  Tang duoi CHI hien ke hoach thuoc dung nhom nay - dung o leaf N2 ma thay phieu
+   *  N1/N7 la doc nham "nhom nay dang co viec". `null` = khong loc. */
+  group?: number | null
 }) {
   // [S175 — anh: "Cho hiển thị theo cây nằm dự án hạng mục"] Tập KHOÁ đang GẬP.
   // Dùng tập-gập (không phải tập-mở) để mặc-định là MỞ HẾT: dự án/hạng mục mới xuất hiện sau
@@ -156,7 +161,10 @@ export function KhkkWorkListPanel({
   //    (2) cửa-sổ 30 phiếu mới nhất có thể toàn phiếu đã duyệt ⇒ tầng dưới rỗng dù còn nháp
   //    cũ hơn. Chấp nhận ở UAT; muốn chuẩn thì BE nhận `phases[]` rồi lọc SERVER-SIDE.
   const OPEN_PHASES: number[] = [KhkkPhase.DangSoanThao, KhkkPhase.TraLai, KhkkPhase.TuChoi]
-  const planItems = (plans.data?.items ?? []).filter((k) => OPEN_PHASES.includes(k.phase))
+  const planItems = (plans.data?.items ?? [])
+    .filter((k) => OPEN_PHASES.includes(k.phase))
+    // [S175] +loc NHOM. `group == null` => khong loc (giu duong cu cho host khong truyen).
+    .filter((k) => group == null || k.approvalGroup === group)
 
   return (
     <aside className="flex min-h-0 flex-col overflow-hidden border-r border-slate-200 bg-white">
diff --git a/fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx b/fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx
index 2c5c900..2964393 100644
--- a/fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx
+++ b/fe-admin/src/components/khkk/KhkkWorkflowPanel.tsx
@@ -33,7 +33,7 @@
 import { useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import { Download, Eye, History, Paperclip, Send, Trash2 } from 'lucide-react'
+import { Download, Eye, History, Paperclip } from 'lucide-react'
 import { AttachmentPreviewDialog, isPreviewable } from '@/components/pe/AttachmentPreviewDialog'
 import { Button } from '@/components/ui/Button'
 import { Dialog } from '@/components/ui/Dialog'
@@ -114,8 +114,8 @@ export function KhkkWorkflowPanel({
 
   const isWaiting = phase === KhkkPhase.ChoDuyet
   const isApproved = phase === KhkkPhase.DaDuyet
-  const isDraftLike = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TraLai
-  const canDeletePlan = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TuChoi
+  // 🧊 [S175] `isDraftLike` / `canSubmit` / `canDeletePlan` ĐÃ GỠ cùng 2 nút "Gửi duyệt" +
+  // "Xóa phiếu" — panel này nay chỉ lo màn ĐANG DUYỆT (Duyệt / Trả lại).
 
   const curStepIdx = plan.currentWorkflowStepIndex
   const curLevelOrder = plan.currentApprovalLevelOrder
@@ -172,7 +172,6 @@ export function KhkkWorkflowPanel({
   // Nút "Gửi duyệt": guard THẬT ở BE (`CreatedBy ∨ DeptManager ∨ Admin`). FE KHÔNG suy được
   // vế DeptManager ⇒ CỐ Ý không ẩn nút theo vai (ẩn = giấu nút với đúng người có quyền, im
   // lặng — bug-class gotcha #44). Chỉ chặn ca chắc-chắn-hỏng: chưa pin quy trình.
-  const canSubmit = isDraftLike && !!plan.approvalWorkflowId
 
   const approvalFiles: KhkkAttachmentDto[] =
     (plan.attachments ?? []).filter(a => a.purpose === KhkkAttachmentPurpose.ApprovalAttachment)
@@ -434,24 +433,15 @@ export function KhkkWorkflowPanel({
         )}
 
         {/* ── 4. Hành động + nút Xóa ─────────────────────────────────────────── */}
-        {(canSubmit || isWaiting || canDeletePlan) && (
+        {/* 🧊 [S175 — anh: "Bỏ hết đi" + "chỗ menu đang duyệt → Duyệt/Trả lại vậy thôi"]
+            "Gửi duyệt" và "Xóa phiếu" ĐÃ RỜI khỏi đây → nay nằm ở THANH NÚT ĐÁY của
+            `KhkkDetailContent`. Panel này từ nay CHỈ còn **Duyệt / Trả lại** — đúng phạm vi
+            "màn đang duyệt". Máy `KhkkTransitionAction.Submit` vẫn nguyên ở BE và ở thanh đáy;
+            gỡ ở đây chỉ là gỡ ĐƯỜNG BẤM TRÙNG, không phải bỏ chức năng. */}
+        {isWaiting && (
           <div>
             <Label className="text-xs">Hành động:</Label>
             <div className="mt-1 flex flex-wrap gap-1.5">
-              {canSubmit && (
-                <button
-                  type="button"
-                  onClick={() => { setComment(''); setPendingFiles([]); setAction(KhkkTransitionAction.Submit) }}
-                  className="inline-flex items-center gap-1 rounded border border-brand-300 px-2 py-1 text-[11px] font-bold text-brand-700 transition hover:bg-brand-50"
-                >
-                  <Send className="h-3 w-3" /> Gửi duyệt
-                </button>
-              )}
-              {isDraftLike && !plan.approvalWorkflowId && (
-                <span className="rounded border border-dashed border-slate-300 px-2 py-1 text-[11px] text-slate-500">
-                  Chưa pin quy trình duyệt — không gửi duyệt được.
-                </span>
-              )}
               {isWaiting && (
                 <>
                   <button
@@ -494,16 +484,6 @@ export function KhkkWorkflowPanel({
                       và mở lại sau này chỉ là thêm nút. Gỡ cả máy = mất dữ-liệu lịch sử. */}
                 </>
               )}
-              {canDeletePlan && (
-                <button
-                  type="button"
-                  onClick={() => setConfirmDelete(true)}
-                  title="Xóa phiếu này (phiếu chuyển sang mục &ldquo;Đã xóa&rdquo;)"
-                  className="inline-flex items-center gap-1 rounded border border-red-300 bg-white px-2 py-1 text-[11px] font-bold text-red-700 transition hover:bg-red-50"
-                >
-                  <Trash2 className="h-3 w-3" /> Xóa phiếu
-                </button>
-              )}
             </div>
           </div>
         )}
diff --git a/fe-admin/src/pages/khkk/KhkkCreatePage.tsx b/fe-admin/src/pages/khkk/KhkkCreatePage.tsx
index 7588544..59f4e87 100644
--- a/fe-admin/src/pages/khkk/KhkkCreatePage.tsx
+++ b/fe-admin/src/pages/khkk/KhkkCreatePage.tsx
@@ -28,7 +28,7 @@
 // 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, type FormEvent, type ReactNode } from 'react'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import { FileCheck, Pencil, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { EmptyState } from '@/components/EmptyState'
@@ -39,7 +39,6 @@ import { KhkkDetailContent } from '@/components/khkk/KhkkDetailContent'
 import { KhkkWorkListPanel } from '@/components/khkk/KhkkWorkListPanel'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
-import { cn } from '@/lib/cn'
 import { useAuth } from '@/contexts/AuthContext'
 import {
   KHKK_APPROVAL_GROUP_DEFAULT,
@@ -67,7 +66,6 @@ interface WorkflowDto {
 // chỉnh"). Giữ lại thành hàm chết thì lượt sau có người gọi lại.
 
 export function KhkkCreatePage() {
-  const navigate = useNavigate()
   const [searchParams] = useSearchParams()
 
   const groupParam = searchParams.get('group')
@@ -203,6 +201,7 @@ export function KhkkCreatePage() {
           selectedPeId={purchaseEvaluationId || null}
           selectedPlanId={viewPlanId}
           onEditPlan={(id) => { setViewPlanId(id); setEditPlan(true) }}
+          group={approvalGroup}
         />
 
         <main className="min-h-0 overflow-y-auto bg-slate-50 p-4 lg:p-6">
@@ -220,44 +219,35 @@ export function KhkkCreatePage() {
             const readOnly = !editPlan || !canEdit
             return (
             <div className="space-y-3">
-              <div className={cn(
-                'flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-2',
-                readOnly ? 'border-violet-200 bg-violet-50' : 'border-emerald-300 bg-emerald-50',
-              )}>
-                <span className={cn('text-[12px] font-medium', readOnly ? 'text-violet-800' : 'text-emerald-800')}>
-                  {readOnly
-                    ? (editPlan && !canEdit
-                        ? 'Kế hoạch này không sửa được (đã gửi duyệt / đã duyệt, hoặc bạn không phải người soạn) — chỉ xem.'
-                        : 'Đang xem kế hoạch — chỉ xem. Bấm bút chì ở danh sách để sửa.')
-                    : '✎ Đang SỬA kế hoạch — thay đổi lưu thẳng vào phiếu.'}
-                </span>
-                <div className="flex items-center gap-2">
-                  {readOnly && canEdit && (
-                    <Button variant="outline" size="sm" onClick={() => setEditPlan(true)}>
-                      <Pencil className="mr-1.5 h-3.5 w-3.5" />
-                      Sửa
-                    </Button>
-                  )}
-                  {!readOnly && (
-                    <Button variant="outline" size="sm" onClick={() => setEditPlan(false)}>
-                      Xong
-                    </Button>
-                  )}
-                  <Button variant="outline" size="sm" onClick={() => navigate(`/khkk/${viewPlanId}`)}>
-                    Mở trang đầy đủ
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={() => { setViewPlanId(null); setEditPlan(false) }}>
-                    <X className="mr-1.5 h-3.5 w-3.5" />
-                    Về form tạo
-                  </Button>
-                </div>
+              {/* 🧊 [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>
               {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>
               )}
               {viewPlan.data && (
-                <KhkkDetailContent plan={viewPlan.data} readOnly={readOnly} onChanged={() => viewPlan.refetch()} />
+                <KhkkDetailContent plan={viewPlan.data} readOnly={readOnly} onChanged={() => viewPlan.refetch()} onDeleted={() => { setViewPlanId(null); setEditPlan(false) }} />
               )}
             </div>
             )
diff --git a/fe-admin/src/pages/khkk/KhkkDetailPage.tsx b/fe-admin/src/pages/khkk/KhkkDetailPage.tsx
index aa05a08..c51b364 100644
--- a/fe-admin/src/pages/khkk/KhkkDetailPage.tsx
+++ b/fe-admin/src/pages/khkk/KhkkDetailPage.tsx
@@ -170,7 +170,7 @@ export function KhkkDetailPage() {
         <KhkkWorkflowPanel plan={k} onChanged={invalidate} onDeleted={() => navigate(backToList)} />
       </div>
 
-      <KhkkDetailContent plan={k} readOnly={readOnly} onChanged={invalidate} />
+      <KhkkDetailContent plan={k} readOnly={readOnly} onChanged={invalidate} onDeleted={() => navigate("/khkk/list")} />
 
       {bridgeOpen && <CreateContractFromKhkkDialog plan={k} onClose={() => setBridgeOpen(false)} />}
     </div>
diff --git a/fe-admin/src/pages/khkk/KhkkListPage.tsx b/fe-admin/src/pages/khkk/KhkkListPage.tsx
index 1f5be3d..7a9464a 100644
--- a/fe-admin/src/pages/khkk/KhkkListPage.tsx
+++ b/fe-admin/src/pages/khkk/KhkkListPage.tsx
@@ -27,9 +27,8 @@
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { FileCheck, Plus, X } from 'lucide-react'
+import { FileCheck, X } from 'lucide-react'
 import { EmptyState } from '@/components/EmptyState'
-import { Button } from '@/components/ui/Button'
 import { KhkkListPanel } from '@/components/khkk/KhkkListPanel'
 import { KhkkDetailContent } from '@/components/khkk/KhkkDetailContent'
 import { KhkkWorkflowPanel } from '@/components/khkk/KhkkWorkflowPanel'
@@ -162,12 +161,10 @@ export function KhkkListPage() {
               Tên nhóm đã có trong `headerTitle` ngay bên trái (dạng ngắn "— N2"), và dải 4 giai
               đoạn ở panel giữa đã chỉ rõ đang đứng ở GĐ2 ⇒ chip này là lần kể thứ ba. */}
         </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>
-        )}
+        {/* [S175 - anh: "Bo het di"] Nut "+ Lap ke hoach" o header DA GO. Duong lap ke
+            hoach di tu man Thao tac (bam phieu PE o cot trai = nap thang vao form tao) —
+            do moi la duong dung nghiep-vu; nut o day de nguoi dung mo form TRONG khong
+            gan PE nao. */}
       </header>
 
       <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
@@ -239,7 +236,7 @@ export function KhkkListPage() {
             <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()} />
+            <KhkkDetailContent plan={plan} readOnly={readOnly} onChanged={() => detail.refetch()} onDeleted={() => setId(null)} />
           )}
         </main>
 
diff --git a/fe-admin/src/types/khkk.ts b/fe-admin/src/types/khkk.ts
index 5ab7264..4d18a6c 100644
--- a/fe-admin/src/types/khkk.ts
+++ b/fe-admin/src/types/khkk.ts
@@ -174,6 +174,9 @@ export interface KhkkListItemDto {
   purchaseEvaluationId: string
   peMaPhieu: string | null
   peTenGoiThau: string | null   // [F-5 S161] BE trả `PeTenGoiThau` (List :39 + Detail :124) — KHÔNG phải tenGoiThau
+  // [S175] Hang muc CONG VIEC cua du an, tu phieu Duyet NCC nguon.
+  // KHAC `KhkkLineDto.tenHangMuc` (danh-muc SP-002 phan loai hop dong) - 2 truc khac nhau.
+  peWorkItemName: string | null
   projectId: string
   projectName: string | null
   departmentId: string | null
diff --git a/fe-user/src/components/khkk/KhkkDetailContent.tsx b/fe-user/src/components/khkk/KhkkDetailContent.tsx
index 64c7a12..d8dd535 100644
--- a/fe-user/src/components/khkk/KhkkDetailContent.tsx
+++ b/fe-user/src/components/khkk/KhkkDetailContent.tsx
@@ -21,7 +21,7 @@
 import { useState, type ReactNode } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import {
-  ClipboardList, Download, Eye, FileCheck, Lock, Paperclip, Pencil, Plus, Save, Trash2, Upload, Users,
+  ClipboardList, Download, Eye, FileCheck, Lock, Paperclip, Pencil, Plus, Trash2, Upload, Users,
 } from 'lucide-react'
 // [S175] Dùng LẠI dialog xem-trước của PE (đã có prop `basePath` từ đợt B) thay vì dựng bản
 // thứ hai cho KHKK — 2 bản = 2 sự thật, sửa 1 chỗ quên chỗ kia.
@@ -40,7 +40,7 @@ import {
   DOSSIER_KIND_LABELS, DOSSIER_STATUS_BADGE, DOSSIER_STATUS_LABELS,
   DossierItemKind, DossierItemStatus,
   KHKK_APPROVAL_GROUP_LABELS, KHKK_PHASE_BADGE, KHKK_PHASE_LABELS,
-  KhkkAttachmentPurpose, KhkkPhase,
+  KhkkAttachmentPurpose, KhkkPhase, KhkkTransitionAction, type KhkkTransitionInput,
   type DossierItemKindValue, type DossierItemStatusValue, type KhkkAttachmentDto,
   type KhkkDetailDto, type KhkkDossierItemDto, type KhkkPhaseValue,
   type UpsertKhkkDossierItemInput,
@@ -149,17 +149,17 @@ export function KhkkDetailContent({
   plan,
   readOnly,
   onChanged,
+  onDeleted,
 }: {
   plan: KhkkDetailDto
   /** [P2-7] Host quyết: `true` khi phiếu ≠ Nháp/Trả lại HOẶC user ≠ người soạn. */
   readOnly: boolean
   onChanged?: () => void
+  /** [S175] Gọi sau khi XÓA phiếu ở thanh nút đáy — host bỏ chọn / quay về danh sách. */
+  onDeleted?: () => void
 }) {
   const qc = useQueryClient()
   const id = plan.id
-  const [editHeader, setEditHeader] = useState(false)
-  const [ghiChu, setGhiChu] = useState('')
-  const [hoSoLink, setHoSoLink] = useState('')
   const [itemForm, setItemForm] = useState<UpsertKhkkDossierItemInput | null>(null)
   // [S175] File đang xem-trước inline trong khối "File đính kèm" đã gộp.
   const [previewAtt, setPreviewAtt] = useState<KhkkAttachmentDto | null>(null)
@@ -180,16 +180,6 @@ export function KhkkDetailContent({
     onChanged?.()
   }
 
-  const saveHeader = useMutation({
-    mutationFn: async () => {
-      await api.put(`/contract-signing-plans/${id}`, {
-        ghiChu: ghiChu.trim() || null,
-        hoSoLink: hoSoLink.trim() || null,
-      })
-    },
-    onSuccess: () => { toast.success('Đã lưu'); setEditHeader(false); invalidate() },
-    onError: (e) => toast.error(getErrorMessage(e)),
-  })
 
   // Danh mục hạng mục SP-002 — chỉ tải khi phiếu còn sửa được (tránh 1 request thừa).
   const catalogOptions = useQuery({
@@ -234,6 +224,26 @@ export function KhkkDetailContent({
     onError: (e) => toast.error(getErrorMessage(e)),
   })
 
+  // [S175 — anh: "phía dưới thêm các nút thao tác"] 2 mutation cho THANH NÚT ĐÁY.
+  // 🔴 CỐ Ý chỉ ôm nhánh **Submit** — nhánh Approve/Return có máy phức tạp (ô-tích
+  // level-finalize + upload file đính kèm SAU khi transition thành công) và nó ở LẠI
+  // `KhkkWorkflowPanel`. Nhân bản nhánh đó sang đây là đẻ sự-thật thứ hai cho đường DUYỆT;
+  // nhánh Submit thì chỉ có đúng `action` + `comment: null` nên bê là an toàn.
+  const submitPlan = useMutation({
+    mutationFn: async () => {
+      const body: KhkkTransitionInput = { action: KhkkTransitionAction.Submit, comment: null }
+      return api.post(`/contract-signing-plans/${id}/transitions`, body)
+    },
+    onSuccess: () => { toast.success('Đã gửi duyệt'); invalidate(); onChanged?.() },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  })
+
+  const deletePlan = useMutation({
+    mutationFn: async () => api.delete(`/contract-signing-plans/${id}`),
+    onSuccess: () => { toast.success('Đã xóa phiếu'); onDeleted?.() },
+    onError: (e) => toast.error(getErrorMessage(e)),
+  })
+
   const upsertItem = useMutation({
     mutationFn: async (body: UpsertKhkkDossierItemInput) => {
       if (!body.name.trim()) throw new Error('Vui lòng nhập tên căn cứ')
@@ -306,11 +316,6 @@ export function KhkkDetailContent({
     }
   }
 
-  const startEditHeader = () => {
-    setGhiChu(plan.ghiChu ?? '')
-    setHoSoLink(plan.hoSoLink ?? '')
-    setEditHeader(true)
-  }
 
   // File "đính kèm khi duyệt" thuộc panel 3 (mục 5) — Section 4 chỉ liệt kê hồ-sơ của phiếu.
   // [S175 · O4] Chia 2 rổ: file GẮN VÀO một căn cứ hiện ngay dưới dòng căn cứ đó; Section 4
@@ -403,6 +408,11 @@ export function KhkkDetailContent({
 
       <div className="divide-y divide-slate-200">
         {/* ─────────────── 1 ─────────────── */}
+        {/* 🧊 [S175 — anh: "Bỏ hết đi"] Nút "Sửa" ĐÃ GỠ khỏi `actions`. Nó chỉ mở form 2 trường
+            **Link hồ sơ + Ghi chú** — mà chính 2 trường đó anh cũng bảo bỏ khỏi màn ở cùng lượt.
+            Giữ nút mở form sửa một thứ không còn hiển thị ở đâu là mâu thuẫn.
+            🔸 Máy KHÔNG mất: `hoSoLink`/`ghiChu` vẫn nằm trong DTO + BE
+            (`UpdateContractSigningPlanDraftCommand`), muốn bày lại chỉ là thêm chỗ vẽ. */}
         <Section
           title="1. Thông tin kế hoạch"
           icon={<FileCheck className="h-4 w-4" />}
@@ -410,13 +420,6 @@ export function KhkkDetailContent({
           head="text-brand-800"
           chipBg="var(--color-brand-50)"
           chipFg="var(--color-brand-600)"
-          actions={
-            isDraft && !editHeader ? (
-              <Button variant="outline" size="sm" onClick={startEditHeader}>
-                <Pencil className="mr-2 h-3.5 w-3.5" /> Sửa
-              </Button>
-            ) : undefined
-          }
         >
           {/* [S175 — anh chốt trên ảnh khoanh đỏ] Mục 1 RÚT GỌN còn 4 ô:
               · "Bỏ hết đi" → GỠ **Phòng ban · Quy trình · Hạn xử lý**
@@ -428,68 +431,25 @@ export function KhkkDetailContent({
           <div className="grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
             <Field label="Mã kế hoạch" value={plan.maKeHoach ?? '—'} mono />
             <Field label="Dự án" value={plan.projectName ?? '—'} />
-            {/* 1 phiếu nay được N hạng mục (S175) ⇒ liệt kê DUY-NHẤT, giữ thứ tự dòng.
-                Dòng chưa gán KHÔNG bịa tên — đếm riêng để người soạn biết còn nợ mấy dòng,
-                vì submit-guard sẽ chặn trình duyệt khi còn dòng chưa gán. */}
-            <Field label="Hạng mục" full>
-              {(() => {
-                const names = [...new Set(plan.lines.map(l => l.tenHangMuc).filter(Boolean))] as string[]
-                const unassigned = plan.lines.filter(l => !l.catalogEntryId).length
-                if (names.length === 0 && unassigned === 0) return DASH
-                return (
-                  <span className="flex flex-wrap items-center gap-1">
-                    {names.map(n => (
-                      <span key={n} className="inline-flex items-center rounded bg-brand-50 px-1.5 py-0.5 text-[11px] font-medium text-brand-700">
-                        {n}
-                      </span>
-                    ))}
-                    {unassigned > 0 && (
-                      <span className="inline-flex items-center rounded bg-amber-100 px-1.5 py-0.5 text-[11px] font-medium text-amber-800">
-                        còn {unassigned} dòng chưa gán
-                      </span>
-                    )}
-                  </span>
-                )
-              })()}
-            </Field>
+            {/* [S175 — anh: "hạng mục của Dự án, Duyệt NCC ấy"] Đây là HẠNG MỤC CÔNG VIỆC của
+                dự án, lấy từ phiếu Duyệt NCC nguồn (`PE.WorkItemId`).
+                🔴 KHÁC hẳn `line.tenHangMuc` — cái đó là danh-mục SP-002 dùng phân loại HỢP
+                ĐỒNG (86 dòng, chọn ở mục 2). Hai thứ trùng tên tiếng Việt nhưng khác trục;
+                lượt trước lead bày nhầm cái SP-002 ở đây nên anh bảo "Bỏ đi". */}
+            <Field label="Hạng mục (dự án)" value={plan.peWorkItemName ?? '—'} />
             <Field label="Người soạn" value={plan.drafterFullName ?? '—'} />
             <Field label="Ngày tạo" value={formatDateTime(plan.createdAt)} />
           </div>
 
-          {editHeader ? (
-            <div className="mt-4 space-y-3 rounded-lg border border-slate-200 bg-slate-50/60 p-4">
-              <div>
-                <Label htmlFor="hoSoLink">Link hồ sơ (NAS)</Label>
-                <Input id="hoSoLink" value={hoSoLink} onChange={(e) => setHoSoLink(e.target.value)} maxLength={1000} placeholder="\\\\nas\\du-an\\..." />
-              </div>
-              <div>
-                <Label htmlFor="ghiChu">Ghi chú</Label>
-                <Textarea id="ghiChu" value={ghiChu} onChange={(e) => setGhiChu(e.target.value)} maxLength={2000} rows={4} />
-                <div className="mt-1 text-xs text-muted-foreground">{ghiChu.length}/2000</div>
-              </div>
-              <div className="flex justify-end gap-2">
-                <Button variant="outline" size="sm" onClick={() => setEditHeader(false)}>Huỷ</Button>
-                <Button size="sm" onClick={() => saveHeader.mutate()} disabled={saveHeader.isPending}>
-                  <Save className="mr-2 h-3.5 w-3.5" />
-                  {saveHeader.isPending ? 'Đang lưu...' : 'Lưu'}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <div className="mt-4 grid grid-cols-1 gap-x-6 gap-y-4 md:grid-cols-2">
-              <Field label="Link hồ sơ" full>
-                {plan.hoSoLink ? <span className="break-all font-normal text-slate-700">{plan.hoSoLink}</span> : <span className="text-slate-300">—</span>}
-              </Field>
-              <Field label="Ghi chú" full>
-                {plan.ghiChu ? <span className="whitespace-pre-wrap font-normal text-slate-700">{plan.ghiChu}</span> : <span className="text-slate-300">—</span>}
-              </Field>
-            </div>
-          )}
+          {/* 🧊 [S175 — anh: "Bỏ đi"] Khối **Link hồ sơ + Ghi chú** (cả ô XEM lẫn form SỬA)
+              ĐÃ GỠ. Lượt trước lead mới gỡ ở lưới trên nên 2 ô này VẪN HIỆN ở khối dưới —
+              anh chụp lại đúng chỗ đó. Nay gỡ trọn cả 2 nhánh của ternary.
+              🔸 Máy KHÔNG mất: hoSoLink / ghiChu còn nguyên trong DTO + BE. */}
         </Section>
 
         {/* ─────────────── 2 ─────────────── */}
         <Section
-          title={`2. Giá đề xuất theo NCC trúng thầu (${plan.lines.length} dòng)`}
+          title={`2. Hạng mục (${plan.lines.length} dòng)`}
           icon={<Users className="h-4 w-4" />}
           accent="var(--color-teal-500)"
           head="text-teal-700"
@@ -520,34 +480,20 @@ export function KhkkDetailContent({
             <div className="overflow-x-auto">
               <table className="w-full min-w-[880px] table-fixed text-xs">
                 <colgroup>
-                  <col className="w-[22%]" />
-                  <col className="w-[22%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
-                  <col className="w-[14%]" />
+                  <col className="w-[52%]" />
+                  <col className="w-[32%]" />
+                  <col className="w-[16%]" />
                 </colgroup>
                 <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>
                     <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</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>
-                    <th className="label-eyebrow px-3 py-2 text-left">Ghi chú</th>
+                    <th className="label-eyebrow px-3 py-2 text-right">Giá</th>
+                    <th className="label-eyebrow px-3 py-2 text-right"></th>
                   </tr>
                 </thead>
                 <tbody>
                   {plan.lines.map((l) => (
                     <tr key={l.id} className="border-b border-slate-100 last:border-0 hover:bg-slate-50/60">
-                      <td className="px-3 py-2 font-medium text-brand-800">
-                        {orDash(l.supplierName)}
-                        {l.contractId && (
-                          <a href={`/contracts/${l.contractId}`} className="ml-2 text-[10px] font-medium text-brand-600 hover:underline" title="Dòng này đã được đưa vào hợp đồng">
-                            ✓ HĐ
-                          </a>
-                        )}
-                      </td>
                       <td className="px-3 py-2 text-slate-700">
                         {isDraft && !l.contractId ? (
                           <>
@@ -555,12 +501,10 @@ export function KhkkDetailContent({
                               value={l.catalogEntryId ?? ''}
                               onChange={(e) => e.target.value && assignLine.mutate({ lineId: l.id, catalogEntryId: e.target.value })}
                               disabled={assignLine.isPending}
-                              aria-label={`Gán hạng mục SP-002 cho dòng ${l.supplierName ?? l.id}`}
-                              className="h-8 w-full min-w-[12rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
+                              aria-label={`Chọn hạng mục cho dòng ${l.id}`}
+                              className="h-8 w-full rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
                             >
                               <option value="">— Chọn hạng mục —</option>
-                              {/* Hạng mục ĐÃ LƯU mà không có trong options ⇒ chèn option đại diện,
-                                  không thì dòng đã gán TRÔNG như chưa gán. */}
                               {l.catalogEntryId && !(catalogOptions.data ?? []).some((c) => c.id === l.catalogEntryId) && (
                                 <option value={l.catalogEntryId}>{l.tenHangMuc ?? '(hạng mục đã gán)'}</option>
                               )}
@@ -568,30 +512,30 @@ export function KhkkDetailContent({
                                 <option key={c.id} value={c.id}>{c.code} — {c.tenVi}</option>
                               ))}
                             </select>
-                            {catalogOptions.isError && (
-                              <div className="mt-1 text-[11px] text-red-600">
-                                Không tải được danh mục hạng mục —{' '}
-                                <button type="button" className="underline" onClick={() => catalogOptions.refetch()}>thử lại</button>
-                              </div>
-                            )}
-                            {catalogOptions.isSuccess && (catalogOptions.data?.length ?? 0) === 0 && (
-                              <div className="mt-1 text-[11px] text-amber-700">
-                                Nhóm duyệt N{plan.approvalGroup} chưa có hạng mục đang hiệu lực — liên hệ quản trị danh mục.
-                              </div>
-                            )}
+                            {/* Ghi chú xuống DÒNG PHỤ thay vì chiếm 1 cột — anh chốt bảng chỉ
+                                còn "hạng mục + giá", nhưng ghi chú thì anh vẫn muốn nhập được. */}
+                            <input
+                              type="text"
+                              maxLength={1000}
+                              defaultValue={l.note ?? ''}
+                              placeholder="Ghi chú (tùy chọn)…"
+                              disabled={saveLineField.isPending}
+                              aria-label="Ghi chú dòng"
+                              onBlur={(e) => {
+                                const v = e.target.value.trim()
+                                if (v !== (l.note ?? '')) saveLineField.mutate({ lineId: l.id, note: v })
+                              }}
+                              className="mt-1 h-7 w-full rounded border border-transparent bg-transparent px-2 text-[11px] text-slate-500 hover:border-slate-200 focus-visible:border-brand-500 focus-visible:bg-white focus-visible:outline-none"
+                            />
                           </>
-                        ) : orDash(l.tenHangMuc)}
+                        ) : (
+                          <>
+                            <div>{orDash(l.tenHangMuc)}</div>
+                            {l.note && <div className="mt-0.5 text-[11px] text-slate-500">{l.note}</div>}
+                          </>
+                        )}
                       </td>
-                      {/* Dòng THÊM TAY có `peReferenceAmount = 0` — BE cố ý KHÔNG copy số tham
-                          chiếu của NCC (đã nằm trọn ở dòng gốc), lặp lại là đếm đôi. Hiện
-                          em-dash mờ thay vì "0 đ" để không đọc nhầm thành "tham chiếu bằng 0". */}
-                      <td className="px-3 py-2 text-right tabular-nums text-slate-600">
-                        {l.peReferenceAmount === 0 ? DASH : formatVnd(l.peReferenceAmount)}
-                      </td>
-                      {/* [S175] GIÁ ĐỀ XUẤT nhập tay — anh chốt "nhiều hạng mục → giá và ghi chú".
-                          Lưu khi rời ô (onBlur) và chỉ khi SỐ ĐỔI THẬT, tránh bắn 1 request mỗi
-                          lần click vào rồi click ra. */}
-                      <td className="px-3 py-2 text-right tabular-nums text-brand-800">
+                      <td className="px-3 py-2 text-right align-top tabular-nums text-brand-800">
                         {isDraft && !l.contractId ? (
                           <input
                             type="number"
@@ -599,52 +543,46 @@ export function KhkkDetailContent({
                             step={1000}
                             defaultValue={l.proposedAmount}
                             disabled={saveLineField.isPending}
-                            aria-label={`Giá đề xuất dòng ${l.tenHangMuc ?? l.supplierName ?? l.id}`}
+                            aria-label="Giá của hạng mục"
                             onBlur={(e) => {
                               const v = Number(e.target.value)
                               if (!Number.isFinite(v) || v < 0) { e.target.value = String(l.proposedAmount); return }
                               if (v !== l.proposedAmount) saveLineField.mutate({ lineId: l.id, proposedAmount: v })
                             }}
-                            className="h-8 w-full min-w-[7rem] rounded-md border border-slate-200 bg-white px-2 text-right text-xs tabular-nums text-brand-800 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
+                            className="h-8 w-full rounded-md border border-slate-200 bg-white px-2 text-right text-xs tabular-nums text-brand-800 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
                           />
                         ) : moneyOrDash(l.proposedAmount)}
                       </td>
-                      <td className="px-3 py-2 text-right tabular-nums text-emerald-700">{moneyOrDash(l.approvedAmount)}</td>
-                      <td className="px-3 py-2 text-slate-600">
-                        {isDraft && !l.contractId ? (
-                          <div className="flex items-center gap-1">
-                            <input
-                              type="text"
-                              maxLength={1000}
-                              defaultValue={l.note ?? ''}
-                              placeholder="Ghi chú…"
-                              disabled={saveLineField.isPending}
-                              aria-label={`Ghi chú dòng ${l.tenHangMuc ?? l.supplierName ?? l.id}`}
-                              onBlur={(e) => {
-                                const v = e.target.value.trim()
-                                if (v !== (l.note ?? '')) saveLineField.mutate({ lineId: l.id, note: v })
-                              }}
-                              className="h-8 w-full min-w-[6rem] rounded-md border border-slate-200 bg-white px-2 text-xs text-slate-700 focus-visible:border-brand-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
-                            />
-                            {/* Chỉ dòng THÊM TAY mới xoá được. Dòng gốc sinh từ phiếu Duyệt NCC
-                                mang snapshot tham chiếu — BE cũng chặn, đây chỉ là không mời bấm. */}
-                            {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="shrink-0 rounded px-1 py-1 text-red-500 hover:bg-red-50"
-                              >
-                                <Trash2 className="h-3.5 w-3.5" />
-                              </button>
-                            )}
-                          </div>
-                        ) : orDash(l.note)}
+                      <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>
                   ))}
                 </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
+                    sánh j với số duyệt PRO hay CCM j cả". Dữ-liệu 2 cột đó VẪN nằm trong DTO
+                    (`peReferenceAmount` / `approvedAmount`), chỉ bỏ chỗ vẽ; `peReferenceAmount`
+                    còn được dùng làm DẤU phân biệt dòng-gốc ⟂ dòng-thêm-tay ở nút xoá trên. */}
+                <tfoot>
+                  <tr className="border-t-2 border-slate-300 bg-slate-50">
+                    <td className="px-3 py-2 text-right text-xs font-semibold uppercase tracking-wide text-slate-600">Tổng</td>
+                    <td className="px-3 py-2 text-right text-sm font-bold tabular-nums text-brand-800">
+                      {formatVnd(plan.lines.reduce((s, l) => s + (l.proposedAmount ?? 0), 0))}
+                    </td>
+                    <td />
+                  </tr>
+                </tfoot>
               </table>
             </div>
 
@@ -939,6 +877,62 @@ export function KhkkDetailContent({
           </div>
         )}
       </Dialog>
+
+      {/* [S175 — anh: "phía dưới thêm các nút thao tác"] THANH NÚT ĐÁY, khuôn PE workspace.
+          Gom về ĐÂY những nút anh bảo gỡ khỏi chỗ khác: "Gửi duyệt" + "Xóa phiếu" (trước ở
+          khối HÀNH ĐỘNG panel 3). Panel 3 từ nay chỉ còn **Duyệt / Trả lại** — đúng câu anh
+          chốt "chỗ menu đang duyệt → Duyệt/Trả lại vậy thôi".
+          🔴 `sticky bottom-0`: phiếu dài, nút nằm cuối trang thì phải cuộn hết mới thấy —
+          dính đáy là để lúc nào cũng với tới được.
+          🔸 KHÔNG có nút "Lưu" rời: mọi ô ở màn này lưu NGAY khi rời ô (hạng mục / giá / ghi
+          chú / file). Thêm một nút "Lưu" không làm gì là hứa hão — nói thẳng bằng dòng chữ
+          bên cạnh thay vì vẽ nút giả. */}
+      {!readOnly && (
+        <div className="sticky bottom-0 z-10 flex flex-wrap items-center gap-3 border-t border-slate-200 bg-white/95 px-5 py-3 backdrop-blur">
+          <button
+            type="button"
+            onClick={() => {
+              if (window.confirm(`Xóa phiếu ${plan.maKeHoach ?? ''}? Phiếu chuyển sang mục "Đã xóa".`)) deletePlan.mutate()
+            }}
+            disabled={deletePlan.isPending}
+            className="inline-flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-2 text-xs font-semibold text-white transition hover:bg-red-700 disabled:opacity-50"
+          >
+            <Trash2 className="h-3.5 w-3.5" />
+            {deletePlan.isPending ? 'Đang xóa…' : 'Xóa phiếu'}
+          </button>
+
+          <span className="min-w-0 flex-1 text-[12px] text-emerald-700">
+            ✓ Các thay đổi đã tự động lưu khi chỉnh sửa từng phần.
+          </span>
+
+          {(() => {
+            // Rào HIỂN THỊ mirror submit-guard BE: chưa pin quy trình, hoặc còn dòng chưa gán
+            // hạng mục ⇒ BE sẽ chặn. Nói TRƯỚC lý do thay vì để bấm rồi ăn 409.
+            const unassigned = plan.lines.filter(l => !l.catalogEntryId).length
+            const noWorkflow = !plan.approvalWorkflowId
+            const blocked = noWorkflow || unassigned > 0 || plan.lines.length === 0
+            const why = noWorkflow ? 'Chưa pin quy trình duyệt cho phiếu.'
+              : plan.lines.length === 0 ? 'Phiếu chưa có dòng NCC nào.'
+                : unassigned > 0 ? `Còn ${unassigned} dòng chưa gán hạng mục.`
+                  : undefined
+            return (
+              <button
+                type="button"
+                onClick={() => { if (!blocked) submitPlan.mutate() }}
+                disabled={blocked || submitPlan.isPending}
+                title={why ?? 'Gửi phiếu vào quy trình duyệt'}
+                className={cn(
+                  'inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-semibold text-white transition',
+                  blocked ? 'cursor-not-allowed bg-slate-300' : 'bg-brand-600 hover:bg-brand-700',
+                  submitPlan.isPending && 'opacity-50',
+                )}
+              >
+                {submitPlan.isPending ? 'Đang gửi…' : 'Lưu & Gửi duyệt →'}
+              </button>
+            )
+          })()}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/fe-user/src/components/khkk/KhkkWorkListPanel.tsx b/fe-user/src/components/khkk/KhkkWorkListPanel.tsx
index 6285d6c..3379f83 100644
--- a/fe-user/src/components/khkk/KhkkWorkListPanel.tsx
+++ b/fe-user/src/components/khkk/KhkkWorkListPanel.tsx
@@ -81,6 +81,7 @@ export function KhkkWorkListPanel({
   selectedPeId,
   selectedPlanId,
   onEditPlan,
+  group,
 }: {
   /** Bấm PE ở tầng trên → host nạp phiếu đó vào form tạo (Ở LẠI màn, không điều hướng). */
   onPickPe: (peId: string) => void
@@ -92,6 +93,10 @@ export function KhkkWorkListPanel({
   /** [S175 · O7] Bấm bút chì trên card KHKK → host mở phiếu ở chế-độ SỬA. Không truyền ⇒
    *  không vẽ bút chì (cột giữ đúng hình cũ). */
   onEditPlan?: (planId: string) => void
+  /** [S175 - anh: "Loc theo quy trinh luon"] Nhom duyet cua leaf menu dang dung.
+   *  Tang duoi CHI hien ke hoach thuoc dung nhom nay - dung o leaf N2 ma thay phieu
+   *  N1/N7 la doc nham "nhom nay dang co viec". `null` = khong loc. */
+  group?: number | null
 }) {
   // [S175 — anh: "Cho hiển thị theo cây nằm dự án hạng mục"] Tập KHOÁ đang GẬP.
   // Dùng tập-gập (không phải tập-mở) để mặc-định là MỞ HẾT: dự án/hạng mục mới xuất hiện sau
@@ -156,7 +161,10 @@ export function KhkkWorkListPanel({
   //    (2) cửa-sổ 30 phiếu mới nhất có thể toàn phiếu đã duyệt ⇒ tầng dưới rỗng dù còn nháp
   //    cũ hơn. Chấp nhận ở UAT; muốn chuẩn thì BE nhận `phases[]` rồi lọc SERVER-SIDE.
   const OPEN_PHASES: number[] = [KhkkPhase.DangSoanThao, KhkkPhase.TraLai, KhkkPhase.TuChoi]
-  const planItems = (plans.data?.items ?? []).filter((k) => OPEN_PHASES.includes(k.phase))
+  const planItems = (plans.data?.items ?? [])
+    .filter((k) => OPEN_PHASES.includes(k.phase))
+    // [S175] +loc NHOM. `group == null` => khong loc (giu duong cu cho host khong truyen).
+    .filter((k) => group == null || k.approvalGroup === group)
 
   return (
     <aside className="flex min-h-0 flex-col overflow-hidden border-r border-slate-200 bg-white">
diff --git a/fe-user/src/components/khkk/KhkkWorkflowPanel.tsx b/fe-user/src/components/khkk/KhkkWorkflowPanel.tsx
index 2c5c900..2964393 100644
--- a/fe-user/src/components/khkk/KhkkWorkflowPanel.tsx
+++ b/fe-user/src/components/khkk/KhkkWorkflowPanel.tsx
@@ -33,7 +33,7 @@
 import { useMemo, useRef, useState } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
-import { Download, Eye, History, Paperclip, Send, Trash2 } from 'lucide-react'
+import { Download, Eye, History, Paperclip } from 'lucide-react'
 import { AttachmentPreviewDialog, isPreviewable } from '@/components/pe/AttachmentPreviewDialog'
 import { Button } from '@/components/ui/Button'
 import { Dialog } from '@/components/ui/Dialog'
@@ -114,8 +114,8 @@ export function KhkkWorkflowPanel({
 
   const isWaiting = phase === KhkkPhase.ChoDuyet
   const isApproved = phase === KhkkPhase.DaDuyet
-  const isDraftLike = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TraLai
-  const canDeletePlan = phase === KhkkPhase.DangSoanThao || phase === KhkkPhase.TuChoi
+  // 🧊 [S175] `isDraftLike` / `canSubmit` / `canDeletePlan` ĐÃ GỠ cùng 2 nút "Gửi duyệt" +
+  // "Xóa phiếu" — panel này nay chỉ lo màn ĐANG DUYỆT (Duyệt / Trả lại).
 
   const curStepIdx = plan.currentWorkflowStepIndex
   const curLevelOrder = plan.currentApprovalLevelOrder
@@ -172,7 +172,6 @@ export function KhkkWorkflowPanel({
   // Nút "Gửi duyệt": guard THẬT ở BE (`CreatedBy ∨ DeptManager ∨ Admin`). FE KHÔNG suy được
   // vế DeptManager ⇒ CỐ Ý không ẩn nút theo vai (ẩn = giấu nút với đúng người có quyền, im
   // lặng — bug-class gotcha #44). Chỉ chặn ca chắc-chắn-hỏng: chưa pin quy trình.
-  const canSubmit = isDraftLike && !!plan.approvalWorkflowId
 
   const approvalFiles: KhkkAttachmentDto[] =
     (plan.attachments ?? []).filter(a => a.purpose === KhkkAttachmentPurpose.ApprovalAttachment)
@@ -434,24 +433,15 @@ export function KhkkWorkflowPanel({
         )}
 
         {/* ── 4. Hành động + nút Xóa ─────────────────────────────────────────── */}
-        {(canSubmit || isWaiting || canDeletePlan) && (
+        {/* 🧊 [S175 — anh: "Bỏ hết đi" + "chỗ menu đang duyệt → Duyệt/Trả lại vậy thôi"]
+            "Gửi duyệt" và "Xóa phiếu" ĐÃ RỜI khỏi đây → nay nằm ở THANH NÚT ĐÁY của
+            `KhkkDetailContent`. Panel này từ nay CHỈ còn **Duyệt / Trả lại** — đúng phạm vi
+            "màn đang duyệt". Máy `KhkkTransitionAction.Submit` vẫn nguyên ở BE và ở thanh đáy;
+            gỡ ở đây chỉ là gỡ ĐƯỜNG BẤM TRÙNG, không phải bỏ chức năng. */}
+        {isWaiting && (
           <div>
             <Label className="text-xs">Hành động:</Label>
             <div className="mt-1 flex flex-wrap gap-1.5">
-              {canSubmit && (
-                <button
-                  type="button"
-                  onClick={() => { setComment(''); setPendingFiles([]); setAction(KhkkTransitionAction.Submit) }}
-                  className="inline-flex items-center gap-1 rounded border border-brand-300 px-2 py-1 text-[11px] font-bold text-brand-700 transition hover:bg-brand-50"
-                >
-                  <Send className="h-3 w-3" /> Gửi duyệt
-                </button>
-              )}
-              {isDraftLike && !plan.approvalWorkflowId && (
-                <span className="rounded border border-dashed border-slate-300 px-2 py-1 text-[11px] text-slate-500">
-                  Chưa pin quy trình duyệt — không gửi duyệt được.
-                </span>
-              )}
               {isWaiting && (
                 <>
                   <button
@@ -494,16 +484,6 @@ export function KhkkWorkflowPanel({
                       và mở lại sau này chỉ là thêm nút. Gỡ cả máy = mất dữ-liệu lịch sử. */}
                 </>
               )}
-              {canDeletePlan && (
-                <button
-                  type="button"
-                  onClick={() => setConfirmDelete(true)}
-                  title="Xóa phiếu này (phiếu chuyển sang mục &ldquo;Đã xóa&rdquo;)"
-                  className="inline-flex items-center gap-1 rounded border border-red-300 bg-white px-2 py-1 text-[11px] font-bold text-red-700 transition hover:bg-red-50"
-                >
-                  <Trash2 className="h-3 w-3" /> Xóa phiếu
-                </button>
-              )}
             </div>
           </div>
         )}
diff --git a/fe-user/src/pages/khkk/KhkkCreatePage.tsx b/fe-user/src/pages/khkk/KhkkCreatePage.tsx
index 7588544..59f4e87 100644
--- a/fe-user/src/pages/khkk/KhkkCreatePage.tsx
+++ b/fe-user/src/pages/khkk/KhkkCreatePage.tsx
@@ -28,7 +28,7 @@
 // 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, type FormEvent, type ReactNode } from 'react'
 import { useMutation, useQuery } from '@tanstack/react-query'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { useSearchParams } from 'react-router-dom'
 import { FileCheck, Pencil, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { EmptyState } from '@/components/EmptyState'
@@ -39,7 +39,6 @@ import { KhkkDetailContent } from '@/components/khkk/KhkkDetailContent'
 import { KhkkWorkListPanel } from '@/components/khkk/KhkkWorkListPanel'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
-import { cn } from '@/lib/cn'
 import { useAuth } from '@/contexts/AuthContext'
 import {
   KHKK_APPROVAL_GROUP_DEFAULT,
@@ -67,7 +66,6 @@ interface WorkflowDto {
 // chỉnh"). Giữ lại thành hàm chết thì lượt sau có người gọi lại.
 
 export function KhkkCreatePage() {
-  const navigate = useNavigate()
   const [searchParams] = useSearchParams()
 
   const groupParam = searchParams.get('group')
@@ -203,6 +201,7 @@ export function KhkkCreatePage() {
           selectedPeId={purchaseEvaluationId || null}
           selectedPlanId={viewPlanId}
           onEditPlan={(id) => { setViewPlanId(id); setEditPlan(true) }}
+          group={approvalGroup}
         />
 
         <main className="min-h-0 overflow-y-auto bg-slate-50 p-4 lg:p-6">
@@ -220,44 +219,35 @@ export function KhkkCreatePage() {
             const readOnly = !editPlan || !canEdit
             return (
             <div className="space-y-3">
-              <div className={cn(
-                'flex flex-wrap items-center justify-between gap-2 rounded-lg border px-4 py-2',
-                readOnly ? 'border-violet-200 bg-violet-50' : 'border-emerald-300 bg-emerald-50',
-              )}>
-                <span className={cn('text-[12px] font-medium', readOnly ? 'text-violet-800' : 'text-emerald-800')}>
-                  {readOnly
-                    ? (editPlan && !canEdit
-                        ? 'Kế hoạch này không sửa được (đã gửi duyệt / đã duyệt, hoặc bạn không phải người soạn) — chỉ xem.'
-                        : 'Đang xem kế hoạch — chỉ xem. Bấm bút chì ở danh sách để sửa.')
-                    : '✎ Đang SỬA kế hoạch — thay đổi lưu thẳng vào phiếu.'}
-                </span>
-                <div className="flex items-center gap-2">
-                  {readOnly && canEdit && (
-                    <Button variant="outline" size="sm" onClick={() => setEditPlan(true)}>
-                      <Pencil className="mr-1.5 h-3.5 w-3.5" />
-                      Sửa
-                    </Button>
-                  )}
-                  {!readOnly && (
-                    <Button variant="outline" size="sm" onClick={() => setEditPlan(false)}>
-                      Xong
-                    </Button>
-                  )}
-                  <Button variant="outline" size="sm" onClick={() => navigate(`/khkk/${viewPlanId}`)}>
-                    Mở trang đầy đủ
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={() => { setViewPlanId(null); setEditPlan(false) }}>
-                    <X className="mr-1.5 h-3.5 w-3.5" />
-                    Về form tạo
-                  </Button>
-                </div>
+              {/* 🧊 [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>
               {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>
               )}
               {viewPlan.data && (
-                <KhkkDetailContent plan={viewPlan.data} readOnly={readOnly} onChanged={() => viewPlan.refetch()} />
+                <KhkkDetailContent plan={viewPlan.data} readOnly={readOnly} onChanged={() => viewPlan.refetch()} onDeleted={() => { setViewPlanId(null); setEditPlan(false) }} />
               )}
             </div>
             )
diff --git a/fe-user/src/pages/khkk/KhkkDetailPage.tsx b/fe-user/src/pages/khkk/KhkkDetailPage.tsx
index aa05a08..c51b364 100644
--- a/fe-user/src/pages/khkk/KhkkDetailPage.tsx
+++ b/fe-user/src/pages/khkk/KhkkDetailPage.tsx
@@ -170,7 +170,7 @@ export function KhkkDetailPage() {
         <KhkkWorkflowPanel plan={k} onChanged={invalidate} onDeleted={() => navigate(backToList)} />
       </div>
 
-      <KhkkDetailContent plan={k} readOnly={readOnly} onChanged={invalidate} />
+      <KhkkDetailContent plan={k} readOnly={readOnly} onChanged={invalidate} onDeleted={() => navigate("/khkk/list")} />
 
       {bridgeOpen && <CreateContractFromKhkkDialog plan={k} onClose={() => setBridgeOpen(false)} />}
     </div>
diff --git a/fe-user/src/pages/khkk/KhkkListPage.tsx b/fe-user/src/pages/khkk/KhkkListPage.tsx
index 1f5be3d..7a9464a 100644
--- a/fe-user/src/pages/khkk/KhkkListPage.tsx
+++ b/fe-user/src/pages/khkk/KhkkListPage.tsx
@@ -27,9 +27,8 @@
 import { useState } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { FileCheck, Plus, X } from 'lucide-react'
+import { FileCheck, X } from 'lucide-react'
 import { EmptyState } from '@/components/EmptyState'
-import { Button } from '@/components/ui/Button'
 import { KhkkListPanel } from '@/components/khkk/KhkkListPanel'
 import { KhkkDetailContent } from '@/components/khkk/KhkkDetailContent'
 import { KhkkWorkflowPanel } from '@/components/khkk/KhkkWorkflowPanel'
@@ -162,12 +161,10 @@ export function KhkkListPage() {
               Tên nhóm đã có trong `headerTitle` ngay bên trái (dạng ngắn "— N2"), và dải 4 giai
               đoạn ở panel giữa đã chỉ rõ đang đứng ở GĐ2 ⇒ chip này là lần kể thứ ba. */}
         </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>
-        )}
+        {/* [S175 - anh: "Bo het di"] Nut "+ Lap ke hoach" o header DA GO. Duong lap ke
+            hoach di tu man Thao tac (bam phieu PE o cot trai = nap thang vao form tao) —
+            do moi la duong dung nghiep-vu; nut o day de nguoi dung mo form TRONG khong
+            gan PE nao. */}
       </header>
 
       <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[400px_1fr_360px]">
@@ -239,7 +236,7 @@ export function KhkkListPage() {
             <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()} />
+            <KhkkDetailContent plan={plan} readOnly={readOnly} onChanged={() => detail.refetch()} onDeleted={() => setId(null)} />
           )}
         </main>
 
diff --git a/fe-user/src/types/khkk.ts b/fe-user/src/types/khkk.ts
index 5ab7264..4d18a6c 100644
--- a/fe-user/src/types/khkk.ts
+++ b/fe-user/src/types/khkk.ts
@@ -174,6 +174,9 @@ export interface KhkkListItemDto {
   purchaseEvaluationId: string
   peMaPhieu: string | null
   peTenGoiThau: string | null   // [F-5 S161] BE trả `PeTenGoiThau` (List :39 + Detail :124) — KHÔNG phải tenGoiThau
+  // [S175] Hang muc CONG VIEC cua du an, tu phieu Duyet NCC nguon.
+  // KHAC `KhkkLineDto.tenHangMuc` (danh-muc SP-002 phan loai hop dong) - 2 truc khac nhau.
+  peWorkItemName: string | null
   projectId: string
   projectName: string | null
   departmentId: string | null
diff --git a/src/Backend/SolutionErp.Application/ContractSigningPlans/ContractSigningPlanFeatures.cs b/src/Backend/SolutionErp.Application/ContractSigningPlans/ContractSigningPlanFeatures.cs
index 8c49a8d..e3cdc10 100644
--- a/src/Backend/SolutionErp.Application/ContractSigningPlans/ContractSigningPlanFeatures.cs
+++ b/src/Backend/SolutionErp.Application/ContractSigningPlans/ContractSigningPlanFeatures.cs
@@ -173,6 +173,9 @@ public record ContractSigningPlanDetailDto(
     Guid PurchaseEvaluationId,
     string? PeMaPhieu,
     string? PeTenGoiThau,
+    /// [S175] Hang muc CONG VIEC cua du an, lay tu phieu Duyet NCC nguon (PE.WorkItemId).
+    /// KHONG phai Line.TenHangMuc (do la danh-muc SP-002 phan loai hop dong).
+    string? PeWorkItemName,
     Guid ProjectId,
     string? ProjectName,
     string? ProjectCode,
@@ -911,10 +914,21 @@ public class GetContractSigningPlanQueryHandler(IApplicationDbContext db, ICurre
         // [W2 S161 — F-8] rào xem mirror PE (list bịt thì detail phải bịt cùng vị ngữ).
         await ContractSigningPlanScope.EnsureCanViewAsync(db, currentUser, plan, ct);
 
+        // [S175] +`WorkItemId` để lấy HẠNG MỤC CÔNG VIỆC CỦA DỰ ÁN — anh: "hạng mục của Dự án,
+        // Duyệt NCC ấy". 🔴 KHÁC hẳn `TenHangMuc` của Line: cái đó là hạng mục danh-mục SP-002
+        // (86 dòng, dùng để phân loại HỢP ĐỒNG); cái này là gói việc của dự án trên phiếu PE.
+        // Trùng tên tiếng Việt nhưng hai trục khác nhau — trộn là chỉ sai gói thầu.
         var pe = await db.PurchaseEvaluations.AsNoTracking()
             .Where(p => p.Id == plan.PurchaseEvaluationId)
-            .Select(p => new { p.MaPhieu, p.TenGoiThau })
+            .Select(p => new { p.MaPhieu, p.TenGoiThau, p.WorkItemId })
             .FirstOrDefaultAsync(ct);
+        // `WorkItemId` là loose-Guid (Mig 49 — KHÔNG FK vật lý) ⇒ join tay, null-safe.
+        var peWorkItemName = pe != null && pe.WorkItemId != null
+            ? await db.WorkItems.AsNoTracking()
+                .Where(w => w.Id == pe.WorkItemId)
+                .Select(w => w.Name)
+                .FirstOrDefaultAsync(ct)
+            : null;
         var project = await db.Projects.AsNoTracking()
             .Where(p => p.Id == plan.ProjectId)
             .Select(p => new { p.Name, p.Code })
@@ -1115,6 +1129,7 @@ public class GetContractSigningPlanQueryHandler(IApplicationDbContext db, ICurre
 
         return new ContractSigningPlanDetailDto(
             plan.Id, plan.MaKeHoach, plan.PurchaseEvaluationId, pe?.MaPhieu, pe?.TenGoiThau,
+            peWorkItemName,
             plan.ProjectId, project?.Name, project?.Code,
             plan.DepartmentId, deptName, plan.DrafterUserId, drafterName,
             plan.Phase, plan.ApprovalWorkflowId, wfCode, wfName,