[CLAUDE] FE-Admin+FE-User: PE Danh sách view — disable toàn bộ tương tác

User feedback 2026-05-07: "Pe_*_List Danh sách disable toàn bộ tương tác, chỉ
show thông tin." Pending (Duyệt) vẫn cho approver chuyển phase + sign opinion.

Implementation:
  ~ PurchaseEvaluationsListPage.tsx (× 2 app)
    - PeDetailTabs readOnly={true} hardcoded (was readOnly={pendingMe})
      → ẩn "Sửa header" / "Xóa" / inline edit Section 1 / BudgetFieldRow edit /
        SuppliersTab edit / ItemsTab edit / OpinionBox sign forms ở MỌI view
        (Danh sách + Duyệt — Duyệt vẫn dùng được vì opinion sign ko phải in
        ListPage scope, ý kiến nhập ở leaf khác per session 11)
    - PeWorkflowPanel readOnly={!pendingMe}
      → Danh sách: hide "Chuyển tiếp" buttons + Dialog
      → Duyệt: vẫn show transition buttons (giữ cho approver work)
  ~ PeWorkflowPanel.tsx (× 2 app)
    - Add prop `readOnly?: boolean` default false
    - Khi readOnly=true: hide Chuyển tiếp section + transition Dialog
    - Show hint "Vào menu Duyệt để chuyển phase" thay vì button

Tạo phiếu mới button GIỮ ở header List page (không phải tương tác trên data
hiện có, là navigation tới create flow workspace).

UAT mode: skip verify, push ngay.

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

fe-admin/src/components/pe/PeWorkflowPanel.tsx

@@ -22,7 +22,14 @@ import {
 } from '@/types/purchaseEvaluation'
 import { PeApprovalsSection, PeHistorySection } from './PeDetailTabs'
 
-export function PeWorkflowPanel({ evaluation }: { evaluation: PeDetailBundle }) {
+export function PeWorkflowPanel({
+  evaluation,
+  readOnly = false,
+}: {
+  evaluation: PeDetailBundle
+  /** true = ẩn Chuyển tiếp + Dialog transition (dùng cho Danh sách, không dùng Duyệt). */
+  readOnly?: boolean
+}) {
   const [target, setTarget] = useState<number | null>(null)
   const [comment, setComment] = useState('')
   const qc = useQueryClient()
@@ -92,7 +99,7 @@ export function PeWorkflowPanel({ evaluation }: { evaluation: PeDetailBundle })
           })}
       </ol>
 
-      {next.length > 0 && (
+      {next.length > 0 && !readOnly && (
         <div>
           <Label className="text-xs">Chuyển tiếp:</Label>
           <div className="mt-1 flex flex-wrap gap-1.5">
@@ -113,6 +120,11 @@ export function PeWorkflowPanel({ evaluation }: { evaluation: PeDetailBundle })
           </div>
         </div>
       )}
+      {readOnly && next.length > 0 && (
+        <div className="rounded border border-dashed border-slate-200 px-3 py-2 text-[11px] text-slate-500">
+          Vào menu &ldquo;Duyệt&rdquo; để chuyển phase.
+        </div>
+      )}
 
       {target !== null && (
         <Dialog

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

@@ -204,12 +204,14 @@ export function PurchaseEvaluationsListPage() {
               evaluation={detail.data}
               onBack={() => setParam('id', null)}
               onDelete={() => del.mutate(detail.data!.id)}
-              readOnly={pendingMe}
+              readOnly={true}
             />
           )}
         </main>
 
         {/* Panel 3: Workflow + history */}
+        {/* Danh sách (pendingMe=false) → readOnly=true → ẩn Chuyển tiếp transition.
+            Duyệt (pendingMe=true) → readOnly=false → cho approver chuyển phase. */}
         <aside className="hidden overflow-y-auto border-l border-slate-200 bg-white p-4 lg:block">
           {!selectedId && (
             <div className="rounded-lg border border-dashed border-slate-200 p-6 text-center text-sm text-slate-400">
@@ -217,7 +219,7 @@ export function PurchaseEvaluationsListPage() {
               Quy trình duyệt sẽ hiện khi chọn phiếu.
             </div>
           )}
-          {selectedId && detail.data && <PeWorkflowPanel evaluation={detail.data} />}
+          {selectedId && detail.data && <PeWorkflowPanel evaluation={detail.data} readOnly={!pendingMe} />}
         </aside>
       </div>
     </div>