[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/pages/pe/PurchaseEvaluationWorkspacePage.tsx

@@ -20,6 +20,7 @@ import { PeWorkspaceCreateView } from '@/components/pe/PeWorkspaceCreateView'
 import { api } from '@/lib/api'
 import { getErrorMessage } from '@/lib/apiError'
 import {
+  PurchaseEvaluationPhase,
   PurchaseEvaluationType,
   PurchaseEvaluationTypeLabel,
   type PeDetailBundle,
@@ -78,7 +79,9 @@ export function PurchaseEvaluationWorkspacePage() {
       </header>
 
       <div className="grid flex-1 grid-cols-1 overflow-hidden lg:grid-cols-[320px_1fr]">
-        {/* Panel 1: List pure picker + sticky create + pencil edit hover */}
+        {/* Panel 1: List pure picker + sticky create + pencil edit hover.
+            Workspace chỉ list phiếu Bản nháp (DangSoanThao) — đã gửi duyệt rồi
+            không hiện ở đây (vào Danh sách / Duyệt). User 2026-05-07. */}
         <PeListPanel
           typeFilter={typeFilter}
           selectedId={selectedId}
@@ -90,6 +93,7 @@ export function PurchaseEvaluationWorkspacePage() {
           showCreateButton
           onCreate={() => setParams({ mode: 'new', id: null, editHeader: null })}
           onEditClick={id => setParams({ id, mode: null, editHeader: '1' })}
+          forcedPhase={PurchaseEvaluationPhase.DangSoanThao}
         />
 
         {/* Panel 2: Empty | Header form | Detail tabs (workspace mode) */}

fe-user/src/pages/pe/PurchaseEvaluationsListPage.tsx

@@ -14,10 +14,12 @@ import { getErrorMessage } from '@/lib/apiError'
 import { cn } from '@/lib/cn'
 import type { Paged } from '@/types/master'
 import {
+  PeDisplayStatus,
+  PeDisplayStatusColor,
+  PeDisplayStatusLabel,
   PurchaseEvaluationPhase,
-  PurchaseEvaluationPhaseColor,
-  PurchaseEvaluationPhaseLabel,
   PurchaseEvaluationTypeLabel,
+  getPeDisplayStatus,
   type PeDetailBundle,
   type PeListItem,
 } from '@/types/purchaseEvaluation'
@@ -124,10 +126,19 @@ export function PurchaseEvaluationsListPage() {
               />
             </div>
             <Select value={phase} onChange={e => setParam('phase', e.target.value)}>
-              <option value="">Tất cả phase</option>
-              {Object.values(PurchaseEvaluationPhase).map(p => (
-                <option key={p} value={p}>{PurchaseEvaluationPhaseLabel[p]}</option>
-              ))}
+              <option value="">Tất cả trạng thái</option>
+              {Object.values(PeDisplayStatus).map(s => {
+                const phaseValue = s === PeDisplayStatus.BanNhap
+                  ? String(PurchaseEvaluationPhase.DangSoanThao)
+                  : s === PeDisplayStatus.DaDuyet
+                  ? String(PurchaseEvaluationPhase.DaDuyet)
+                  : s === PeDisplayStatus.TuChoi
+                  ? String(PurchaseEvaluationPhase.TuChoi)
+                  : '' // DaGuiDuyet — multi-phase, không filter exact (TODO BE)
+                return phaseValue ? (
+                  <option key={s} value={phaseValue}>{PeDisplayStatusLabel[s]}</option>
+                ) : null
+              })}
             </Select>
           </div>
 
@@ -171,10 +182,10 @@ export function PurchaseEvaluationsListPage() {
                       <span
                         className={cn(
                           'shrink-0 rounded px-1.5 py-0.5 text-[10px] font-medium',
-                          PurchaseEvaluationPhaseColor[p.phase],
+                          PeDisplayStatusColor[getPeDisplayStatus(p.phase)],
                         )}
                       >
-                        {PurchaseEvaluationPhaseLabel[p.phase]}
+                        {PeDisplayStatusLabel[getPeDisplayStatus(p.phase)]}
                       </span>
                     </div>
                     <div className="mt-1 flex items-center justify-between text-[11px] text-slate-500">