[CLAUDE] FE-PE: Hành động button rút gọn label + 3 màu phân biệt + bold
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 3m19s

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.
This commit is contained in:
pqhuy1987
2026-05-09 02:00:29 +07:00
parent daad79d282
commit 873e7a1b7b
2 changed files with 26 additions and 26 deletions

View File

@ -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}