[CLAUDE] FE-Admin+FE-User: PE display status meta — Bản nháp / Đã gửi duyệt / Đã duyệt / Từ chối

User feedback 2026-05-07: thêm 2 trạng thái meta hiển thị "Bản nháp" + "Đã
gửi duyệt". Bản nháp chỉ hiện ở Thao tác workspace, không hiện ở Duyệt menu.

Implementation:
  ~ types/purchaseEvaluation.ts
    + PeDisplayStatus enum (BanNhap / DaGuiDuyet / DaDuyet / TuChoi)
    + PeDisplayStatusLabel + PeDisplayStatusColor
    + getPeDisplayStatus(phase) helper:
        DangSoanThao → BanNhap
        DaDuyet → DaDuyet
        TuChoi → TuChoi
        else (any middle phase) → DaGuiDuyet
  ~ components/pe/PeListPanel.tsx
    - Phase Select filter → Display status Select (4 option, "Đã gửi duyệt"
      KHÔNG filter exact phase do multi-phase, để client-side TODO BE)
    - Row badge dùng display status (gọn 4 màu)
    + Prop forcedPhase?: number — workspace dùng để khóa filter Bản nháp
      (DangSoanThao). Khi forcedPhase set: ẩn Select, show "Lọc cố định: Bản
      nháp" indicator.
  ~ components/pe/PeDetailTabs.tsx
    - Header badge dùng display status meta + secondary text "(Phase chi tiết)"
      nhỏ bên cạnh để approver/dev vẫn biết phase exact
  ~ pages/pe/PurchaseEvaluationsListPage.tsx
    - Phase filter Select → display status options
    - Row badge → display status
  ~ pages/pe/PurchaseEvaluationWorkspacePage.tsx
    - PeListPanel forcedPhase={PurchaseEvaluationPhase.DangSoanThao}
      → workspace chỉ list Bản nháp (đúng UX user yêu cầu)

Workflow timeline Panel 3 + workflow service BE KHÔNG đổi (giữ phase chi tiết
DangSoanThao/ChoPurchasing/ChoCCM/etc cho approval logic).

Pe_*_Pending Duyệt: dùng /inbox endpoint vốn đã filter chỉ phiếu cần user duyệt
→ DangSoanThao auto-không xuất hiện (không có active approver). Nên Bản nháp
auto-hidden từ Duyệt menu, không cần filter thêm.

UAT mode: skip verify, push ngay.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

fe-user/src/components/pe/PeDetailTabs.tsx

@@ -20,10 +20,13 @@ import {
   PeAttachmentPurposeLabel,
   PeDepartmentKind,
   PeDepartmentKindLabel,
+  PeDisplayStatusColor,
+  PeDisplayStatusLabel,
   PurchaseEvaluationPhase,
   PurchaseEvaluationPhaseColor,
   PurchaseEvaluationPhaseLabel,
   PurchaseEvaluationTypeLabel,
+  getPeDisplayStatus,
   type PeAttachment,
   type PeChangelog,
   type PeDepartmentOpinion,
@@ -75,13 +78,18 @@ export function PeDetailTabs({
         <div>
           <div className="flex items-center gap-2">
             <h2 className="text-base font-semibold text-slate-900">{evaluation.tenGoiThau}</h2>
+            {/* Display status meta (Bản nháp / Đã gửi duyệt / Đã duyệt / Từ chối)
+                — phase chi tiết hiện ở Workflow timeline Panel 3. */}
             <span
               className={cn(
                 'rounded px-1.5 py-0.5 text-[11px] font-medium',
-                PurchaseEvaluationPhaseColor[evaluation.phase],
+                PeDisplayStatusColor[getPeDisplayStatus(evaluation.phase)],
               )}
             >
-              {PurchaseEvaluationPhaseLabel[evaluation.phase]}
+              {PeDisplayStatusLabel[getPeDisplayStatus(evaluation.phase)]}
+            </span>
+            <span className="text-[10px] text-slate-400" title="Phase workflow chi tiết">
+              ({PurchaseEvaluationPhaseLabel[evaluation.phase]})
             </span>
             {readOnly && (
               <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[11px] font-medium text-slate-600">