[CLAUDE] Contract: UAT S174 dot-D + C3 — O6/O4/O7/O8 + 2 tong toan phieu (FE-only, 0-mig)

Owner S175 chot cach doc "sum tong" (gate TIEN): (1) truc = CHI TONG TOAN PHIEU, KHONG co
dong tong per-NCC; (2) hien 2 TONG RIENG canh nhau — Sigma gia DE XUAT ⟂ Sigma gia DUYET,
dat PHIA TREN bang. Mirror 9 CAP file sha256 khop 9/9; build XANH ca 2 app, 0 error TS.

=== O6 — bam card PE tren cay GIU NGUYEN man KHKK ===
+callback `onOpenPe` (usePipelineStages) mirror DOI XUNG `onOpenKhkk` cua leaf GD2.
KHONG truyen => giu `navigate('/purchase-evaluations?id=..&expand=1')` => 5 host cay con lai
0 doi hanh vi (da verify: chi KhkkListPage truyen).
Host: `?pe=<id>` render `PeDetailTabs readOnly mode="workspace"` ngay panel 2 — DUNG LAI
renderer that cua man PE thay vi dung ban rut gon thu hai (2 ban = 2 su that).
🔴 `pe` va `id` LOAI TRU NHAU (2 setter cung xoa key kia): panel 2 chi ve duoc mot thu, de
ca hai thi lan chon sau khong xoa duoc lan truoc.
`<lg` roi ve duong cu (khong co panel 2 thi xem-tai-cho la bat kha).
Panel 3 doi chu khi dang xem PE — cau cu "se hien khi chon phieu" la SAI (phieu DA chon roi).

=== O4 — shopdrawing / can cu ho so cho dinh kem file (FE-only) ===
🔴 0 BE MOI — rail da du: controller `[FromForm] Guid? dossierItemId` (:181) + DTO
`KhkkAttachmentDto.dossierItemId` (:241) co tu Mig 69. FE truoc day don gian la KHONG BAO GIO
gui truong do len => moi file roi ve muc PHIEU. Nay upload gui kem dossierItemId.
Chia 2 ro: file gan can cu hien ngay DUOI dong can cu do; Section 4 chi con file muc phieu —
khong chia thi file hien o CA HAI cho, nguoi dung dem 2 lan.
Dong-con file hien CA KHI read-only (nguoi duyet can xem shopdrawing, chi khong them/xoa).

=== O7 — nut edit tren card KHKK (man Thao tac) ===
But chi khuon `PeListPanel:208-232`. LUON hien roi MO DI khi khong sua duoc: nut chi-hien-khi-
hover thi tren may cam-ung khong ai tim ra; an han khi phieu khoa thi nguoi dung tuong chuc
nang khong ton tai thay vi hieu la phieu da di duyet.
🔴 Nut NGOAI the <button> cua card — long button trong button la HTML khong hop le.
Host: but chi => mo che-do SUA; than card => chi xem nhu cu. Guard readOnly Y HET
`KhkkListPage:147-150` (cung mot cau hoi "ai duoc sua" phai cho cung mot cau tra loi o moi man).
Da verify khong phai co-hoc: `KhkkDetailContent:161` `isDraft = draftPhase && !readOnly`.

=== O8 — cay 2 cap Du an > Hang muc ===
🔴 0 ENDPOINT MOI: `workItemName` DA co san trong `KhkkPeCandidateDto:423` => cap 2 la gom lai
tren du-lieu dang co. Truoc day 1 cap theo du an nen mot du an nhieu goi thau do ra danh sach
phang dai, khong thay ranh gioi hang muc.
🔴 2 muc `z` khac nhau (z-20 cha / z-10 con): cung z thi header hang muc truot DE len header
du an khi cuon, mat cap cha.

=== C3 — Field: value ve slate-900, label giu brand-600 ===
Truoc day MOI value deu to brand => mau thuong-hieu mat het suc nang: ca trang deu la mau nhan
thi khong con gi la nhan, va khong chua duoc mau cho thu THAT SU can noi (NCC trung thau,
canh bao vuot ngan sach). PE giu slate cho value dung vi ly do nay.

=== O3 — MOI LAND VE (2). VE (1) CHUA LAM — xem CON NO ===
🔴 KHONG cong gop 2 cot thanh mot so "hien hanh": de-xuat va duyet la 2 so co y nghia phap-ly
khac nhau (mot cai chua ai chot, mot cai da qua choke-point `ApplyApprovedValuesOnFinalize`);
tron lai la bia ra mot so khong ton tai trong ho-so nao.
Tong duyet chi cong phan DA co, va noi ro con bao nhieu dong chua chot.

=== 🔴 CON NO — O3 ve (1) "hang muc cho chon NHIEU" KHONG PHAI FE-ONLY ===
Spec ghi O3 = "N-ROW 0-migration". "0-migration" DUNG (unique 3 cot PlanId+SupplierId+
CatalogEntryId co tu Mig 71) NHUNG KHONG co nghia la 0 BE. Do that:
  · KHONG co endpoint TAO line. Chi co `PUT /{id}/lines/{lineId}` = gan catalogEntryId cho
    dong DA CO (Controller:121). Danh sach route day du: 0 route POST/DELETE line.
  · Line duoc auto-sinh 1-dong-moi-NCC-trung-thau luc TAO PHIEU (`Features.cs:508-527`),
    tien moi = tong bao gia DUOC CHON cua NCC do.
=> Muon 1 NCC co N hang muc phai TACH tien cua NCC do ra N phan — va KHONG CO quy tac nao
   trong he thong noi chia the nao. Do la cau hoi TIEN, chua ai tra loi.
🔸 Tin tot: BE cau HD da nhan N dong san (`CreateContractFromSigningPlanFeatures:101-115`
   nhan `LineIds` list, chi rao "moi HD 1 NCC"). Cai hep la FE dialog dung radio single-select
   (`KhkkDetailPage:310`) — do la UI, doi duoc.

=== CON NO KHAC ===
🔴 CHUA soi mat tren prod 375/1366/1440 (5 lane NO-SCREENSHOT, gotcha #3) — moi ket luan la
DOC MA, khong phai da nhin.

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

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

@@ -29,7 +29,7 @@
 import { useState, type FormEvent, type ReactNode } from 'react'
 import { useMutation, useQuery } from '@tanstack/react-query'
 import { useNavigate, useSearchParams } from 'react-router-dom'
-import { FileCheck, X } from 'lucide-react'
+import { FileCheck, Pencil, X } from 'lucide-react'
 import { toast } from 'sonner'
 import { EmptyState } from '@/components/EmptyState'
 import { Button } from '@/components/ui/Button'
@@ -39,9 +39,12 @@ 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,
   KHKK_APPROVAL_GROUP_LABELS,
+  KhkkPhase,
   khkkGroupMenuLabel,
   type CreateKhkkInput,
   type KhkkDetailDto,
@@ -81,6 +84,9 @@ export function KhkkCreatePage() {
   // [S174] Phiếu KHKK đang XEM ở panel 2. Có giá trị ⇒ panel 2 hiện phiếu (read-only) thay
   // cho form tạo. `null` ⇒ về form tạo. Đây là thứ thay cho việc `navigate('/khkk/:id')`.
   const [viewPlanId, setViewPlanId] = useState<string | null>(null)
+  // [S175 · O7] Bấm bút chì = mở thẳng chế-độ SỬA; bấm thân card = chỉ xem như cũ.
+  const [editPlan, setEditPlan] = useState(false)
+  const { user } = useAuth()
 
   // Cùng query key với `KhkkWorkListPanel` ⇒ dùng CHUNG cache, không gọi mạng 2 lần.
   const candidates = useQuery({
@@ -193,24 +199,54 @@ export function KhkkCreatePage() {
       <div className="grid flex-1 grid-cols-1 grid-rows-[minmax(0,14rem)_minmax(0,1fr)] overflow-hidden lg:grid-cols-[260px_1fr] lg:grid-rows-1 xl:grid-cols-[320px_1fr]">
         <KhkkWorkListPanel
           onPickPe={pickPe}
-          onPickPlan={setViewPlanId}
+          onPickPlan={(id) => { setViewPlanId(id); setEditPlan(false) }}
           selectedPeId={purchaseEvaluationId || null}
           selectedPlanId={viewPlanId}
+          onEditPlan={(id) => { setViewPlanId(id); setEditPlan(true) }}
         />
 
         <main className="min-h-0 overflow-y-auto bg-slate-50 p-4 lg:p-6">
           {/* (a) Đang XEM một kế hoạch — read-only, có đường quay về form tạo. */}
-          {viewPlanId && (
+          {viewPlanId && (() => {
+            // [S175 · O7] `readOnly` = KHÔNG bấm bút chì, HOẶC phiếu không đủ điều-kiện sửa.
+            // 🔴 Guard y hệt `KhkkListPage.tsx:147-150` — cùng một câu hỏi "ai được sửa phiếu
+            // này" thì phải cho cùng một câu trả lời ở mọi màn; lệch nhau là đẻ lỗ hổng đúng
+            // kiểu gotcha #82 (một màn khoá, màn kia hở).
+            // 🔸 Đây là rào HIỂN THỊ. Rào THẬT vẫn ở BE (`KeHoachKyKet.Update` + phase guard).
+            const p = viewPlan.data
+            const canEdit = !!p
+              && (p.phase === KhkkPhase.DangSoanThao || p.phase === KhkkPhase.TraLai)
+              && (!user?.id || p.drafterUserId === user.id)
+            const readOnly = !editPlan || !canEdit
+            return (
             <div className="space-y-3">
-              <div className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-violet-200 bg-violet-50 px-4 py-2">
-                <span className="text-[12px] font-medium text-violet-800">
-                  Đang xem kế hoạch — chỉ xem, không sửa ở màn Thao tác.
+              <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)}>
+                  <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>
@@ -221,10 +257,11 @@ export function KhkkCreatePage() {
                 <div className="text-sm text-red-600">Không tìm thấy phiếu.</div>
               )}
               {viewPlan.data && (
-                <KhkkDetailContent plan={viewPlan.data} readOnly onChanged={() => viewPlan.refetch()} />
+                <KhkkDetailContent plan={viewPlan.data} readOnly={readOnly} onChanged={() => viewPlan.refetch()} />
               )}
             </div>
-          )}
+            )
+          })()}
 
           {/* (b) Chưa chọn gì — nói rõ phải bấm ở đâu, thay vì để trống một mảng trắng. */}
           {!viewPlanId && !purchaseEvaluationId && (