From 873e7a1b7bd65e2dca074405c1b5c8a560fcb4fd Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Sat, 9 May 2026 02:00:29 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-PE:=20H=C3=A0nh=20=C4=91=E1=BB=99?=
 =?UTF-8?q?ng=20button=20r=C3=BAt=20g=E1=BB=8Dn=20label=20+=203=20m=C3=A0u?=
 =?UTF-8?q?=20ph=C3=A2n=20bi=E1=BB=87t=20+=20bold?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PeWorkflowPanel.tsx (fe-admin + fe-user mirror per §3.9):
- Label rút gọn: "✓ Duyệt" / "← Trả lại" / "✗ Từ chối"
  (bỏ "→ Chờ X" + "(về Drafter sửa)" + "Hủy /" verbose)
- Phase đích vẫn hiện qua tooltip title khi hover Duyệt
- 3 màu border + text phân biệt:
  - Duyệt   = emerald (xanh lá positive)
  - Trả lại = amber (vàng request changes, không terminal)
  - Từ chối = red (đỏ terminal negative)
- font-medium → font-bold (đậm hơn theo user request)

Verify: npm run build × 2 pass · 0 TS error.
---
 .../src/components/pe/PeWorkflowPanel.tsx     | 28 +++++++++----------
 fe-user/src/components/pe/PeWorkflowPanel.tsx | 24 ++++++++--------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/fe-admin/src/components/pe/PeWorkflowPanel.tsx b/fe-admin/src/components/pe/PeWorkflowPanel.tsx
index fc401eb..c11e298 100644
--- a/fe-admin/src/components/pe/PeWorkflowPanel.tsx
+++ b/fe-admin/src/components/pe/PeWorkflowPanel.tsx
@@ -204,26 +204,23 @@ export function PeWorkflowPanel({
           <Label className="text-xs">Hành động:</Label>
           <div className="mt-1 flex flex-wrap gap-1.5">
             {next.map(p => {
-              // Phân loại button theo hành động:
-              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — red
-              // - Hủy/Từ chối = TuChoi (chỉ ở phase DangSoanThao đầu) — red
-              // - Duyệt = forward phase tiếp theo — brand
+              // Phân loại button theo hành động (3 màu khác nhau, in đậm):
+              // - Duyệt   = forward phase tiếp theo — emerald (xanh lá positive)
+              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — amber (request changes)
+              // - Từ chối = TuChoi — red (terminal negative)
               const isSendBack = (p === PurchaseEvaluationPhase.DangSoanThao || p === PurchaseEvaluationPhase.TraLai)
                 && evaluation.phase !== PurchaseEvaluationPhase.DangSoanThao
                 && evaluation.phase !== PurchaseEvaluationPhase.TraLai
               const isCancel = p === PurchaseEvaluationPhase.TuChoi
-              const isDanger = isSendBack || isCancel
-              const isForwardApprove = !isDanger
+              const isForwardApprove = !isSendBack && !isCancel
               // Mig 24 — disable Duyệt forward nếu V2 pin + actor không trong cấp hiện tại
               const isDisabled = isForwardApprove && blockedByV2Level
-              const label = isSendBack
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
-                : undefined
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+                  : undefined
               return (
                 <button
                   key={p}
@@ -231,10 +228,11 @@ export function PeWorkflowPanel({
                   disabled={isDisabled}
                   title={title}
                   className={cn(
-                    'rounded border px-2 py-1 text-[11px] font-medium transition',
+                    'rounded border px-2 py-1 text-[11px] font-bold transition',
                     isDisabled && 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400 hover:bg-slate-50',
-                    !isDisabled && isDanger && 'border-red-200 text-red-700 hover:bg-red-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-50',
+                    !isDisabled && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
+                    !isDisabled && isSendBack && 'border-amber-300 text-amber-700 hover:bg-amber-50',
+                    !isDisabled && isCancel && 'border-red-300 text-red-700 hover:bg-red-50',
                   )}
                 >
                   {label}
diff --git a/fe-user/src/components/pe/PeWorkflowPanel.tsx b/fe-user/src/components/pe/PeWorkflowPanel.tsx
index 53aa270..3612929 100644
--- a/fe-user/src/components/pe/PeWorkflowPanel.tsx
+++ b/fe-user/src/components/pe/PeWorkflowPanel.tsx
@@ -198,22 +198,23 @@ export function PeWorkflowPanel({
           <Label className="text-xs">Hành động:</Label>
           <div className="mt-1 flex flex-wrap gap-1.5">
             {next.map(p => {
+              // Phân loại button theo hành động (3 màu khác nhau, in đậm):
+              // - Duyệt   = forward phase tiếp theo — emerald (xanh lá positive)
+              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — amber (request changes)
+              // - Từ chối = TuChoi — red (terminal negative)
               const isSendBack = (p === PurchaseEvaluationPhase.DangSoanThao || p === PurchaseEvaluationPhase.TraLai)
                 && evaluation.phase !== PurchaseEvaluationPhase.DangSoanThao
                 && evaluation.phase !== PurchaseEvaluationPhase.TraLai
               const isCancel = p === PurchaseEvaluationPhase.TuChoi
-              const isDanger = isSendBack || isCancel
-              const isForwardApprove = !isDanger
+              const isForwardApprove = !isSendBack && !isCancel
               // Mig 24 — disable Duyệt forward nếu V2 pin + actor không trong cấp hiện tại
               const isDisabled = isForwardApprove && blockedByV2Level
-              const label = isSendBack
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
-                : undefined
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
+                  : undefined
               return (
                 <button
                   key={p}
@@ -221,10 +222,11 @@ export function PeWorkflowPanel({
                   disabled={isDisabled}
                   title={title}
                   className={cn(
-                    'rounded border px-2 py-1 text-[11px] font-medium transition',
+                    'rounded border px-2 py-1 text-[11px] font-bold transition',
                     isDisabled && 'cursor-not-allowed border-slate-200 bg-slate-50 text-slate-400 hover:bg-slate-50',
-                    !isDisabled && isDanger && 'border-red-200 text-red-700 hover:bg-red-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-50',
+                    !isDisabled && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
+                    !isDisabled && isSendBack && 'border-amber-300 text-amber-700 hover:bg-amber-50',
+                    !isDisabled && isCancel && 'border-red-300 text-red-700 hover:bg-red-50',
                   )}
                 >
                   {label}