[CLAUDE] FE-PE: Hành động button rút gọn label + 3 màu phân biệt + bold

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.

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

@@ -204,25 +204,22 @@ 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:
+              // Phân loại button theo hành động (3 màu khác nhau, in đậm):
-              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — red
+              // - Duyệt   = forward phase tiếp theo — emerald (xanh lá positive)
-              // - Hủy/Từ chối = TuChoi (chỉ ở phase DangSoanThao đầu) — red
+              // - Trả lại = về DangSoanThao/TraLai (từ phase trung gian) — amber (request changes)
-              // - Duyệt = forward phase tiếp theo — brand
+              // - 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 = !isSendBack && !isCancel
-              const isForwardApprove = !isDanger
               // 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
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
                   : undefined
               return (
                 <button
@@ -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 && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-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}

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

@@ -198,21 +198,22 @@ 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 = !isSendBack && !isCancel
-              const isForwardApprove = !isDanger
               // 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
+              const label = isSendBack ? '← Trả lại' : isCancel ? '✗ Từ chối' : '✓ Duyệt'
-                ? '← Trả lại (về Drafter sửa)'
-                : isCancel
-                  ? '✗ Hủy / Từ chối'
-                  : `✓ Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
               const title = isDisabled && evaluation.currentApproval
                 ? `Cấp ${evaluation.currentApproval.levelOrder} chỉ ${evaluation.currentApproval.approvers.map(a => a.fullName).join(' / ')} mới duyệt được.`
+                : isForwardApprove
+                  ? `Duyệt → ${PurchaseEvaluationPhaseLabel[p]}`
                   : undefined
               return (
                 <button
@@ -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 && isForwardApprove && 'border-emerald-300 text-emerald-700 hover:bg-emerald-50',
-                    !isDisabled && !isDanger && 'border-brand-300 text-brand-700 hover:bg-brand-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}