[CLAUDE] Domain+FE: PE thêm phase TraLai + pencil always visible + edit gating

User feedback 2026-05-07: 1. Pencil edit icon LUÔN hiện (không chỉ hover) trong workspace Panel 1 2. Pencil sáng (active brand-color) khi phase editable, xám/disabled khi không 3. Click pencil khi sáng → row sáng + auto-open edit toàn bộ (header + detail) 4. Thêm phase mới "Trả lại" — approver gửi về Drafter sửa (vs Từ chối terminal) 5. Edit chỉ cho 2 trạng thái: Đang soạn thảo + Trả lại (Từ chối + Đã gửi duyệt + Đã duyệt → không edit/thao tác gì) Implementation: ~ Domain/PurchaseEvaluations/PurchaseEvaluationPhase.cs + TraLai = 98 (giữa DaDuyet=7 và TuChoi=99) Comment ghi rõ "approver trả về Drafter sửa, vẫn cho edit, khác TuChoi" ~ types/purchaseEvaluation.ts (× 2 app) + PurchaseEvaluationPhase enum: TraLai = 98 + PurchaseEvaluationPhaseLabel/Color cho TraLai (yellow) + isEditablePhase(phase) helper: true cho DangSoanThao + TraLai + PeDisplayStatus thêm "TraLai" (separate, không gộp DaGuiDuyet) + getPeDisplayStatus map TraLai → "Trả lại" badge yellow ~ components/pe/PeListPanel.tsx (× 2 app) - Pencil icon: bỏ opacity-0 hover-only → LUÔN visible - editable=isEditablePhase(p.phase): bright text-brand-600 + cursor-pointer - !editable: text-slate-300 + cursor-not-allowed + onClick guard ignored - title tooltip rõ ràng "đã gửi duyệt / đã duyệt / từ chối — không sửa được" - Bỏ forcedPhase prop → editableOnly prop (filter client-side cả 2 phase DangSoanThao + TraLai vì BE chưa support multi-phase param) - Khi editableOnly: hiển thị "Lọc cố định: Bản nháp + Trả lại" indicator ~ components/pe/PeDetailTabs.tsx (× 2 app) - Header bar: isDraft → canEditPhase = isEditablePhase(phase) - InfoTab: canEdit = !readOnly && isEditablePhase - BudgetFieldRow: canEdit = !readOnly && isEditablePhase → Đồng nghĩa Drafter sửa được phiếu Trả lại sau approver send back ~ pages/pe/PurchaseEvaluationWorkspacePage.tsx (× 2 app) - PeListPanel forcedPhase=DangSoanThao → editableOnly - Bỏ import PurchaseEvaluationPhase Workflow service BE chưa wire transition → TraLai (defer — user sẽ thêm button "Trả lại" trong PeWorkflowPanel duyệt sau, hoặc dùng API PATCH manual). Phase TraLai chỉ là enum value sẵn sàng FE hiển thị + BE ánh xạ HasConversion<int>. UAT mode: skip verify, push ngay. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-07 15:38:46 +07:00
parent 0c5db1385f
commit d15398fafe
9 changed files with 146 additions and 81 deletions
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@ -27,6 +27,7 @@ import {
  PurchaseEvaluationPhaseLabel,
  PurchaseEvaluationTypeLabel,
  getPeDisplayStatus,
+  isEditablePhase,
  type PeAttachment,
  type PeChangelog,
  type PeDepartmentOpinion,
@ -69,7 +70,9 @@ export function PeDetailTabs({
  autoEditHeader?: boolean
 }) {
  const navigate = useNavigate()
-  const isDraft = evaluation.phase === PurchaseEvaluationPhase.DangSoanThao
+  // isDraft renamed → canEditPhase: bao gồm cả TraLai (per user 2026-05-07).
+  // Header bar action buttons (Sửa header / Xóa) hiện khi phase editable + !readOnly.
+  const canEditPhase = isEditablePhase(evaluation.phase)
  const opinionsReadOnly = readOnly || mode === 'workspace'

  return (
@ -107,7 +110,7 @@ export function PeDetailTabs({
          </div>
        </div>
        <div className="flex gap-2">
-          {isDraft && !readOnly && (
+          {canEditPhase && !readOnly && (
            <>
              <Button variant="ghost" onClick={() => navigate(`/purchase-evaluations/new?id=${evaluation.id}`)} className="gap-1.5 text-xs">
                <Pencil className="h-3.5 w-3.5" /> Sửa header
@ -303,14 +306,14 @@ export function PeHistorySection({ ev }: { ev: PeDetailBundle }) {
 }

 // ===== Section 1 — Thông tin gói thầu (spec: a. Tên gói thầu / b. Dự án) =====
-// Inline editable khi canEdit (=!readOnly && isDraft). Edit pencil button "Sửa"
-// flip display ↔ form mode. Save dùng existing PUT /pe/:id endpoint với current
-// entity values + new header fields. Dự án + Type LOCKED sau create — chỉ Tên/
-// Địa điểm/Mô tả/Payment editable inline. autoEdit prop cho phép trigger edit
-// mode từ pencil icon trong PeListPanel (URL flag ?editHeader=1).
+// Inline editable khi canEdit (=!readOnly && phase editable). Edit pencil button
+// "Sửa" flip display ↔ form mode. Save dùng existing PUT /pe/:id endpoint với
+// current entity values + new header fields. Dự án + Type LOCKED sau create —
+// chỉ Tên/Địa điểm/Mô tả/Payment editable inline. autoEdit prop cho phép trigger
+// edit mode từ pencil icon trong PeListPanel (URL flag ?editHeader=1).
+// Phase editable = DangSoanThao + TraLai (user 2026-05-07).
 function InfoTab({ ev, readOnly, autoEdit }: { ev: PeDetailBundle; readOnly: boolean; autoEdit: boolean }) {
-  const isDraft = ev.phase === PurchaseEvaluationPhase.DangSoanThao
-  const canEdit = !readOnly && isDraft
+  const canEdit = !readOnly && isEditablePhase(ev.phase)
  const qc = useQueryClient()
  const [editing, setEditing] = useState(autoEdit && canEdit)
  const [tenGoiThau, setTenGoiThau] = useState(ev.tenGoiThau)
@ -443,12 +446,11 @@ function InfoTab({ ev, readOnly, autoEdit }: { ev: PeDetailBundle; readOnly: boo
 // ===== b. Ngân sách inline editor (Mig 17) =====
 // Hiển thị + edit budget link / manual fields ngay trong Section 2 — KHÔNG cần
 // đi tới "Sửa header" page. Visible trong cả 3 view (Workspace / Danh sách /
-// Duyệt). Edit chỉ enable khi !readOnly + isDraft (Drafter sửa). Read-only
-// khi pendingMe=1 hoặc phase đã chuyển khỏi DangSoanThao. Empty values hiển
-// thị empty (per user 2026-05-07).
+// Duyệt). Edit chỉ enable khi !readOnly + phase editable (DangSoanThao /
+// TraLai). Read-only khi pendingMe=1 hoặc phase đã gửi duyệt / đã duyệt /
+// từ chối. Empty values hiển thị empty (per user 2026-05-07).
 function BudgetFieldRow({ ev, readOnly }: { ev: PeDetailBundle; readOnly: boolean }) {
-  const isDraft = ev.phase === PurchaseEvaluationPhase.DangSoanThao
-  const canEdit = !readOnly && isDraft
+  const canEdit = !readOnly && isEditablePhase(ev.phase)
  const qc = useQueryClient()

  // Detect mode khi mount/refresh: prefer manual mode nếu đã có data manual + ko link
--- a/fe-admin/src/components/pe/PeListPanel.tsx
+++ b/fe-admin/src/components/pe/PeListPanel.tsx
@ -22,6 +22,7 @@ import {
  PurchaseEvaluationPhase,
  PurchaseEvaluationTypeLabel,
  getPeDisplayStatus,
+  isEditablePhase,
  type PeListItem,
 } from '@/types/purchaseEvaluation'

@ -51,13 +52,12 @@ export function PeListPanel({
  onCreate?: () => void
  /** Pencil edit icon hover next-to-row — click → select + auto-open Section 1 edit mode (URL ?editHeader=1). */
  onEditClick?: (id: string) => void
-  /** Force phase filter (vd workspace chỉ hiện Bản nháp = DangSoanThao). Khi set:
-   * ẩn phase Select dropdown + force fetch params phase=<this>. */
-  forcedPhase?: number
+  /** Workspace mode: chỉ list phiếu editable (DangSoanThao + TraLai). Filter
+   * client-side sau khi fetch — BE chưa hỗ trợ multi-phase param. */
+  editableOnly?: boolean
 }) {
-  const effectivePhase = forcedPhase !== undefined ? String(forcedPhase) : phase
  const list = useQuery({
-    queryKey: ['pe-list', { typeFilter, pendingMe, search, phase: effectivePhase }],
+    queryKey: ['pe-list', { typeFilter, pendingMe, search, phase }],
    queryFn: async () => {
      if (pendingMe) {
        const res = await api.get<PeListItem[]>('/purchase-evaluations/inbox', {
@ -70,14 +70,17 @@ export function PeListPanel({
          pageSize: 50,
          search: search || undefined,
          type: typeFilter ?? undefined,
-          phase: effectivePhase || undefined,
+          phase: phase || undefined,
        },
      })
      return res.data
    },
  })

-  const rows = list.data?.items ?? []
+  const allRows = list.data?.items ?? []
+  const rows = editableOnly
+    ? allRows.filter(p => isEditablePhase(p.phase))
+    : allRows

  return (
    <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
@ -88,7 +91,7 @@ export function PeListPanel({
            Danh sách phiếu
          </div>
          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
-            {list.data?.total ?? 0}
+            {rows.length}
          </span>
        </div>
        <div className="relative">
@ -100,17 +103,17 @@ export function PeListPanel({
            className="pl-8"
          />
        </div>
-        {forcedPhase === undefined ? (
+        {editableOnly ? (
+          <div className="rounded border border-slate-200 bg-slate-50 px-2 py-1.5 text-[11px] text-slate-600">
+            Lọc cố định: <strong>Bản nháp + Trả lại</strong> (chỉ phiếu sửa được)
+          </div>
+        ) : (
          <Select value={phase} onChange={e => onPhaseChange(e.target.value)}>
            <option value="">Tất cả trạng thái</option>
            {Object.values(PeDisplayStatus).map(s => (
              <option key={s} value={statusToPhaseValue(s)}>{PeDisplayStatusLabel[s]}</option>
            ))}
          </Select>
-        ) : (
-          <div className="rounded border border-slate-200 bg-slate-50 px-2 py-1.5 text-[11px] text-slate-600">
-            Lọc cố định: <strong>{PeDisplayStatusLabel[getPeDisplayStatus(forcedPhase)]}</strong>
-          </div>
        )}
      </div>

@ -179,16 +182,30 @@ export function PeListPanel({
                  <div className="mt-1 text-[10px] text-brand-600">✓ Đã tạo HĐ</div>
                )}
              </button>
-              {/* Edit pencil — visible on hover (chỉ khi onEditClick được truyền) */}
-              {onEditClick && (
-                <button
-                  onClick={() => onEditClick(p.id)}
-                  className="absolute right-2 top-2 rounded p-1.5 text-slate-400 opacity-0 transition group-hover:opacity-100 hover:bg-white hover:text-brand-600 hover:shadow-sm"
-                  title="Sửa thông tin gói thầu"
-                >
-                  <Pencil className="h-3.5 w-3.5" />
-                </button>
-              )}
+              {/* Edit pencil — LUÔN visible (user 2026-05-07).
+                  Bright/active khi phase editable (DangSoanThao + TraLai).
+                  Dim/disabled khi phase không edit được (Đã gửi duyệt / Đã duyệt
+                  / Từ chối) — click không có tác dụng. */}
+              {onEditClick && (() => {
+                const editable = isEditablePhase(p.phase)
+                return (
+                  <button
+                    onClick={() => editable && onEditClick(p.id)}
+                    disabled={!editable}
+                    className={cn(
+                      'absolute right-2 top-2 rounded p-1.5 transition',
+                      editable
+                        ? 'text-brand-600 hover:bg-brand-50 hover:shadow-sm cursor-pointer'
+                        : 'text-slate-300 cursor-not-allowed',
+                    )}
+                    title={editable
+                      ? 'Sửa phiếu (header + chi tiết)'
+                      : 'Phiếu đã gửi duyệt / đã duyệt / từ chối — không sửa được'}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                )
+              })()}
            </li>
          ))}
        </ul>
--- a/fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
+++ b/fe-admin/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
@ -20,7 +20,6 @@ import { PeWorkspaceCreateView } from '@/components/pe/PeWorkspaceCreateView'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
 import {
-  PurchaseEvaluationPhase,
  PurchaseEvaluationType,
  PurchaseEvaluationTypeLabel,
  type PeDetailBundle,
@ -93,7 +92,7 @@ export function PurchaseEvaluationWorkspacePage() {
          showCreateButton
          onCreate={() => setParams({ mode: 'new', id: null, editHeader: null })}
          onEditClick={id => setParams({ id, mode: null, editHeader: '1' })}
-          forcedPhase={PurchaseEvaluationPhase.DangSoanThao}
+          editableOnly
        />

        {/* Panel 2: Empty | Header form | Detail tabs (workspace mode) */}
--- a/fe-admin/src/types/purchaseEvaluation.ts
+++ b/fe-admin/src/types/purchaseEvaluation.ts
@ -24,7 +24,8 @@ export const PurchaseEvaluationPhase = {
  ChoCEODuyetPA: 5,
  ChoCEODuyetNCC: 6,
  DaDuyet: 7,
-  TuChoi: 99,
+  TraLai: 98,                   // approver trả về Drafter sửa — vẫn cho edit
+  TuChoi: 99,                   // terminal từ chối — KHÔNG edit
 } as const
 export type PurchaseEvaluationPhase = typeof PurchaseEvaluationPhase[keyof typeof PurchaseEvaluationPhase]

@ -36,6 +37,7 @@ export const PurchaseEvaluationPhaseLabel: Record<number, string> = {
  5: 'Chờ CEO duyệt PA',
  6: 'Chờ CEO duyệt NCC',
  7: 'Đã duyệt',
+  98: 'Trả lại',
  99: 'Từ chối',
 }

@ -47,9 +49,17 @@ export const PurchaseEvaluationPhaseColor: Record<number, string> = {
  5: 'bg-fuchsia-100 text-fuchsia-700',
  6: 'bg-pink-100 text-pink-700',
  7: 'bg-emerald-100 text-emerald-700',
+  98: 'bg-yellow-100 text-yellow-800',
  99: 'bg-red-100 text-red-700',
 }

+// Phase nào được phép edit phiếu (Drafter sửa header + detail).
+// User 2026-05-07: chỉ Đang soạn thảo + Trả lại (Từ chối là terminal, không edit).
+export function isEditablePhase(phase: number): boolean {
+  return phase === PurchaseEvaluationPhase.DangSoanThao
+    || phase === PurchaseEvaluationPhase.TraLai
+}
+
 // Display status meta — gom các phase chi tiết thành 4 nhóm hiển thị end-user
 // friendly. Workflow timeline + workflow service vẫn dùng phase chi tiết.
 // User 2026-05-07 chỉnh:
@ -60,6 +70,7 @@ export const PurchaseEvaluationPhaseColor: Record<number, string> = {
 export const PeDisplayStatus = {
  BanNhap: 'BanNhap',
  DaGuiDuyet: 'DaGuiDuyet',
+  TraLai: 'TraLai',
  DaDuyet: 'DaDuyet',
  TuChoi: 'TuChoi',
 } as const
@ -68,6 +79,7 @@ export type PeDisplayStatus = typeof PeDisplayStatus[keyof typeof PeDisplayStatu
 export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
  BanNhap: 'Bản nháp',
  DaGuiDuyet: 'Đã gửi duyệt',
+  TraLai: 'Trả lại',
  DaDuyet: 'Đã duyệt',
  TuChoi: 'Từ chối',
 }
@ -75,6 +87,7 @@ export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
 export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
  BanNhap: 'bg-slate-100 text-slate-700',
  DaGuiDuyet: 'bg-amber-100 text-amber-700',
+  TraLai: 'bg-yellow-100 text-yellow-800',
  DaDuyet: 'bg-emerald-100 text-emerald-700',
  TuChoi: 'bg-red-100 text-red-700',
 }
@ -82,6 +95,7 @@ export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
 export function getPeDisplayStatus(phase: number): PeDisplayStatus {
  if (phase === PurchaseEvaluationPhase.DangSoanThao) return PeDisplayStatus.BanNhap
  if (phase === PurchaseEvaluationPhase.DaDuyet) return PeDisplayStatus.DaDuyet
+  if (phase === PurchaseEvaluationPhase.TraLai) return PeDisplayStatus.TraLai
  if (phase === PurchaseEvaluationPhase.TuChoi) return PeDisplayStatus.TuChoi
  return PeDisplayStatus.DaGuiDuyet
 }
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@ -27,6 +27,7 @@ import {
  PurchaseEvaluationPhaseLabel,
  PurchaseEvaluationTypeLabel,
  getPeDisplayStatus,
+  isEditablePhase,
  type PeAttachment,
  type PeChangelog,
  type PeDepartmentOpinion,
@ -69,7 +70,9 @@ export function PeDetailTabs({
  autoEditHeader?: boolean
 }) {
  const navigate = useNavigate()
-  const isDraft = evaluation.phase === PurchaseEvaluationPhase.DangSoanThao
+  // isDraft renamed → canEditPhase: bao gồm cả TraLai (per user 2026-05-07).
+  // Header bar action buttons (Sửa header / Xóa) hiện khi phase editable + !readOnly.
+  const canEditPhase = isEditablePhase(evaluation.phase)
  const opinionsReadOnly = readOnly || mode === 'workspace'

  return (
@ -107,7 +110,7 @@ export function PeDetailTabs({
          </div>
        </div>
        <div className="flex gap-2">
-          {isDraft && !readOnly && (
+          {canEditPhase && !readOnly && (
            <>
              <Button variant="ghost" onClick={() => navigate(`/purchase-evaluations/new?id=${evaluation.id}`)} className="gap-1.5 text-xs">
                <Pencil className="h-3.5 w-3.5" /> Sửa header
@ -303,14 +306,14 @@ export function PeHistorySection({ ev }: { ev: PeDetailBundle }) {
 }

 // ===== Section 1 — Thông tin gói thầu (spec: a. Tên gói thầu / b. Dự án) =====
-// Inline editable khi canEdit (=!readOnly && isDraft). Edit pencil button "Sửa"
-// flip display ↔ form mode. Save dùng existing PUT /pe/:id endpoint với current
-// entity values + new header fields. Dự án + Type LOCKED sau create — chỉ Tên/
-// Địa điểm/Mô tả/Payment editable inline. autoEdit prop cho phép trigger edit
-// mode từ pencil icon trong PeListPanel (URL flag ?editHeader=1).
+// Inline editable khi canEdit (=!readOnly && phase editable). Edit pencil button
+// "Sửa" flip display ↔ form mode. Save dùng existing PUT /pe/:id endpoint với
+// current entity values + new header fields. Dự án + Type LOCKED sau create —
+// chỉ Tên/Địa điểm/Mô tả/Payment editable inline. autoEdit prop cho phép trigger
+// edit mode từ pencil icon trong PeListPanel (URL flag ?editHeader=1).
+// Phase editable = DangSoanThao + TraLai (user 2026-05-07).
 function InfoTab({ ev, readOnly, autoEdit }: { ev: PeDetailBundle; readOnly: boolean; autoEdit: boolean }) {
-  const isDraft = ev.phase === PurchaseEvaluationPhase.DangSoanThao
-  const canEdit = !readOnly && isDraft
+  const canEdit = !readOnly && isEditablePhase(ev.phase)
  const qc = useQueryClient()
  const [editing, setEditing] = useState(autoEdit && canEdit)
  const [tenGoiThau, setTenGoiThau] = useState(ev.tenGoiThau)
@ -443,12 +446,11 @@ function InfoTab({ ev, readOnly, autoEdit }: { ev: PeDetailBundle; readOnly: boo
 // ===== b. Ngân sách inline editor (Mig 17) =====
 // Hiển thị + edit budget link / manual fields ngay trong Section 2 — KHÔNG cần
 // đi tới "Sửa header" page. Visible trong cả 3 view (Workspace / Danh sách /
-// Duyệt). Edit chỉ enable khi !readOnly + isDraft (Drafter sửa). Read-only
-// khi pendingMe=1 hoặc phase đã chuyển khỏi DangSoanThao. Empty values hiển
-// thị empty (per user 2026-05-07).
+// Duyệt). Edit chỉ enable khi !readOnly + phase editable (DangSoanThao /
+// TraLai). Read-only khi pendingMe=1 hoặc phase đã gửi duyệt / đã duyệt /
+// từ chối. Empty values hiển thị empty (per user 2026-05-07).
 function BudgetFieldRow({ ev, readOnly }: { ev: PeDetailBundle; readOnly: boolean }) {
-  const isDraft = ev.phase === PurchaseEvaluationPhase.DangSoanThao
-  const canEdit = !readOnly && isDraft
+  const canEdit = !readOnly && isEditablePhase(ev.phase)
  const qc = useQueryClient()

  // Detect mode khi mount/refresh: prefer manual mode nếu đã có data manual + ko link
--- a/fe-user/src/components/pe/PeListPanel.tsx
+++ b/fe-user/src/components/pe/PeListPanel.tsx
@ -22,6 +22,7 @@ import {
  PurchaseEvaluationPhase,
  PurchaseEvaluationTypeLabel,
  getPeDisplayStatus,
+  isEditablePhase,
  type PeListItem,
 } from '@/types/purchaseEvaluation'

@ -51,13 +52,12 @@ export function PeListPanel({
  onCreate?: () => void
  /** Pencil edit icon hover next-to-row — click → select + auto-open Section 1 edit mode (URL ?editHeader=1). */
  onEditClick?: (id: string) => void
-  /** Force phase filter (vd workspace chỉ hiện Bản nháp = DangSoanThao). Khi set:
-   * ẩn phase Select dropdown + force fetch params phase=<this>. */
-  forcedPhase?: number
+  /** Workspace mode: chỉ list phiếu editable (DangSoanThao + TraLai). Filter
+   * client-side sau khi fetch — BE chưa hỗ trợ multi-phase param. */
+  editableOnly?: boolean
 }) {
-  const effectivePhase = forcedPhase !== undefined ? String(forcedPhase) : phase
  const list = useQuery({
-    queryKey: ['pe-list', { typeFilter, pendingMe, search, phase: effectivePhase }],
+    queryKey: ['pe-list', { typeFilter, pendingMe, search, phase }],
    queryFn: async () => {
      if (pendingMe) {
        const res = await api.get<PeListItem[]>('/purchase-evaluations/inbox', {
@ -70,14 +70,17 @@ export function PeListPanel({
          pageSize: 50,
          search: search || undefined,
          type: typeFilter ?? undefined,
-          phase: effectivePhase || undefined,
+          phase: phase || undefined,
        },
      })
      return res.data
    },
  })

-  const rows = list.data?.items ?? []
+  const allRows = list.data?.items ?? []
+  const rows = editableOnly
+    ? allRows.filter(p => isEditablePhase(p.phase))
+    : allRows

  return (
    <aside className="flex flex-col overflow-hidden border-r border-slate-200 bg-white">
@ -88,7 +91,7 @@ export function PeListPanel({
            Danh sách phiếu
          </div>
          <span className="rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
-            {list.data?.total ?? 0}
+            {rows.length}
          </span>
        </div>
        <div className="relative">
@ -100,17 +103,17 @@ export function PeListPanel({
            className="pl-8"
          />
        </div>
-        {forcedPhase === undefined ? (
+        {editableOnly ? (
+          <div className="rounded border border-slate-200 bg-slate-50 px-2 py-1.5 text-[11px] text-slate-600">
+            Lọc cố định: <strong>Bản nháp + Trả lại</strong> (chỉ phiếu sửa được)
+          </div>
+        ) : (
          <Select value={phase} onChange={e => onPhaseChange(e.target.value)}>
            <option value="">Tất cả trạng thái</option>
            {Object.values(PeDisplayStatus).map(s => (
              <option key={s} value={statusToPhaseValue(s)}>{PeDisplayStatusLabel[s]}</option>
            ))}
          </Select>
-        ) : (
-          <div className="rounded border border-slate-200 bg-slate-50 px-2 py-1.5 text-[11px] text-slate-600">
-            Lọc cố định: <strong>{PeDisplayStatusLabel[getPeDisplayStatus(forcedPhase)]}</strong>
-          </div>
        )}
      </div>

@ -179,16 +182,30 @@ export function PeListPanel({
                  <div className="mt-1 text-[10px] text-brand-600">✓ Đã tạo HĐ</div>
                )}
              </button>
-              {/* Edit pencil — visible on hover (chỉ khi onEditClick được truyền) */}
-              {onEditClick && (
-                <button
-                  onClick={() => onEditClick(p.id)}
-                  className="absolute right-2 top-2 rounded p-1.5 text-slate-400 opacity-0 transition group-hover:opacity-100 hover:bg-white hover:text-brand-600 hover:shadow-sm"
-                  title="Sửa thông tin gói thầu"
-                >
-                  <Pencil className="h-3.5 w-3.5" />
-                </button>
-              )}
+              {/* Edit pencil — LUÔN visible (user 2026-05-07).
+                  Bright/active khi phase editable (DangSoanThao + TraLai).
+                  Dim/disabled khi phase không edit được (Đã gửi duyệt / Đã duyệt
+                  / Từ chối) — click không có tác dụng. */}
+              {onEditClick && (() => {
+                const editable = isEditablePhase(p.phase)
+                return (
+                  <button
+                    onClick={() => editable && onEditClick(p.id)}
+                    disabled={!editable}
+                    className={cn(
+                      'absolute right-2 top-2 rounded p-1.5 transition',
+                      editable
+                        ? 'text-brand-600 hover:bg-brand-50 hover:shadow-sm cursor-pointer'
+                        : 'text-slate-300 cursor-not-allowed',
+                    )}
+                    title={editable
+                      ? 'Sửa phiếu (header + chi tiết)'
+                      : 'Phiếu đã gửi duyệt / đã duyệt / từ chối — không sửa được'}
+                  >
+                    <Pencil className="h-3.5 w-3.5" />
+                  </button>
+                )
+              })()}
            </li>
          ))}
        </ul>
--- a/fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
+++ b/fe-user/src/pages/pe/PurchaseEvaluationWorkspacePage.tsx
@ -20,7 +20,6 @@ import { PeWorkspaceCreateView } from '@/components/pe/PeWorkspaceCreateView'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
 import {
-  PurchaseEvaluationPhase,
  PurchaseEvaluationType,
  PurchaseEvaluationTypeLabel,
  type PeDetailBundle,
@ -93,7 +92,7 @@ export function PurchaseEvaluationWorkspacePage() {
          showCreateButton
          onCreate={() => setParams({ mode: 'new', id: null, editHeader: null })}
          onEditClick={id => setParams({ id, mode: null, editHeader: '1' })}
-          forcedPhase={PurchaseEvaluationPhase.DangSoanThao}
+          editableOnly
        />

        {/* Panel 2: Empty | Header form | Detail tabs (workspace mode) */}
--- a/fe-user/src/types/purchaseEvaluation.ts
+++ b/fe-user/src/types/purchaseEvaluation.ts
@ -24,7 +24,8 @@ export const PurchaseEvaluationPhase = {
  ChoCEODuyetPA: 5,
  ChoCEODuyetNCC: 6,
  DaDuyet: 7,
-  TuChoi: 99,
+  TraLai: 98,                   // approver trả về Drafter sửa — vẫn cho edit
+  TuChoi: 99,                   // terminal từ chối — KHÔNG edit
 } as const
 export type PurchaseEvaluationPhase = typeof PurchaseEvaluationPhase[keyof typeof PurchaseEvaluationPhase]

@ -36,6 +37,7 @@ export const PurchaseEvaluationPhaseLabel: Record<number, string> = {
  5: 'Chờ CEO duyệt PA',
  6: 'Chờ CEO duyệt NCC',
  7: 'Đã duyệt',
+  98: 'Trả lại',
  99: 'Từ chối',
 }

@ -47,9 +49,17 @@ export const PurchaseEvaluationPhaseColor: Record<number, string> = {
  5: 'bg-fuchsia-100 text-fuchsia-700',
  6: 'bg-pink-100 text-pink-700',
  7: 'bg-emerald-100 text-emerald-700',
+  98: 'bg-yellow-100 text-yellow-800',
  99: 'bg-red-100 text-red-700',
 }

+// Phase nào được phép edit phiếu (Drafter sửa header + detail).
+// User 2026-05-07: chỉ Đang soạn thảo + Trả lại (Từ chối là terminal, không edit).
+export function isEditablePhase(phase: number): boolean {
+  return phase === PurchaseEvaluationPhase.DangSoanThao
+    || phase === PurchaseEvaluationPhase.TraLai
+}
+
 // Display status meta — gom các phase chi tiết thành 4 nhóm hiển thị end-user
 // friendly. Workflow timeline + workflow service vẫn dùng phase chi tiết.
 // User 2026-05-07 chỉnh:
@ -60,6 +70,7 @@ export const PurchaseEvaluationPhaseColor: Record<number, string> = {
 export const PeDisplayStatus = {
  BanNhap: 'BanNhap',
  DaGuiDuyet: 'DaGuiDuyet',
+  TraLai: 'TraLai',
  DaDuyet: 'DaDuyet',
  TuChoi: 'TuChoi',
 } as const
@ -68,6 +79,7 @@ export type PeDisplayStatus = typeof PeDisplayStatus[keyof typeof PeDisplayStatu
 export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
  BanNhap: 'Bản nháp',
  DaGuiDuyet: 'Đã gửi duyệt',
+  TraLai: 'Trả lại',
  DaDuyet: 'Đã duyệt',
  TuChoi: 'Từ chối',
 }
@ -75,6 +87,7 @@ export const PeDisplayStatusLabel: Record<PeDisplayStatus, string> = {
 export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
  BanNhap: 'bg-slate-100 text-slate-700',
  DaGuiDuyet: 'bg-amber-100 text-amber-700',
+  TraLai: 'bg-yellow-100 text-yellow-800',
  DaDuyet: 'bg-emerald-100 text-emerald-700',
  TuChoi: 'bg-red-100 text-red-700',
 }
@ -82,6 +95,7 @@ export const PeDisplayStatusColor: Record<PeDisplayStatus, string> = {
 export function getPeDisplayStatus(phase: number): PeDisplayStatus {
  if (phase === PurchaseEvaluationPhase.DangSoanThao) return PeDisplayStatus.BanNhap
  if (phase === PurchaseEvaluationPhase.DaDuyet) return PeDisplayStatus.DaDuyet
+  if (phase === PurchaseEvaluationPhase.TraLai) return PeDisplayStatus.TraLai
  if (phase === PurchaseEvaluationPhase.TuChoi) return PeDisplayStatus.TuChoi
  return PeDisplayStatus.DaGuiDuyet
 }
--- a/src/Backend/SolutionErp.Domain/PurchaseEvaluations/PurchaseEvaluationPhase.cs
+++ b/src/Backend/SolutionErp.Domain/PurchaseEvaluations/PurchaseEvaluationPhase.cs
@ -16,5 +16,6 @@ public enum PurchaseEvaluationPhase
    ChoCEODuyetPA = 5,         // chỉ B (duyệt phương án trước)
    ChoCEODuyetNCC = 6,        // chung cả A & B — duyệt chọn đơn vị
    DaDuyet = 7,               // terminal thành công
-    TuChoi = 99,               // terminal từ chối
+    TraLai = 98,               // approver trả về cho Drafter sửa (vẫn cho edit, khác TuChoi)
+    TuChoi = 99,               // terminal từ chối — KHÔNG cho edit/thao tác
 }