[CLAUDE] FE-PE: Winner NCC revert badge → icon ✓ đậm + hover transition
All checks were successful
Deploy SOLUTION_ERP / build-deploy (push) Successful in 2m50s

User Session 20 turn 9: bỏ badge "🏆 Trúng thầu" emerald-600 rounded-full
text-white, revert về icon stick ✓ prefix như cũ nhưng:
- Đậm hơn: text-base font-bold text-emerald-700
- Tên NCC khi winner: text-emerald-900 đậm
- Row hover transition: hover:bg-emerald-200/70 (winner) +
  hover:bg-white/80 hover:shadow-sm (non-winner palette)
- Transition smooth qua `transition` class

NCC row visual khi winner:
  - border-l-emerald-500 (giữ)
  - bg-emerald-100/70 (giữ)
  - font-semibold + shadow-sm + ring-1 ring-inset ring-emerald-300 (giữ)
  - +hover:bg-emerald-200/70 (mới — sáng lên hover)
  - Prefix ✓ text-base font-bold emerald-700 (đậm hơn icon cũ)
  - Tên NCC text-emerald-900 (đậm hơn slate-900 mặc định)

NCC row non-winner:
  - palette cycle (blue/purple/sky/teal/pink) giữ
  - +hover:bg-white/80 hover:shadow-sm (mới — nổi nhẹ khi hover)

Mirror fe-admin + fe-user.

Verify:
- npm run build × fe-admin pass
- npm run build × fe-user pass

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
pqhuy1987
2026-05-11 11:57:51 +07:00
parent 3ec7b5a1b0
commit 83aae8ea64
2 changed files with 12 additions and 20 deletions

View File

@ -1470,20 +1470,16 @@ function HangMucCard({
<tr
key={s.id}
className={cn(
'align-top border-l-4',
'align-top border-l-4 transition',
isWinner
? 'border-l-emerald-500 bg-emerald-100/70 font-semibold shadow-sm ring-1 ring-inset ring-emerald-300'
: palette,
? 'border-l-emerald-500 bg-emerald-100/70 font-semibold shadow-sm ring-1 ring-inset ring-emerald-300 hover:bg-emerald-200/70'
: cn(palette, 'hover:bg-white/80 hover:shadow-sm'),
)}
>
<td className="border-r border-slate-200 px-2 py-1.5">
<div className="flex flex-wrap items-center gap-1.5">
<span className="font-medium text-slate-900">{s.supplierName}</span>
{isWinner && (
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-600 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-white shadow-sm">
🏆 Trúng thầu
</span>
)}
<div className="font-medium text-slate-900">
{isWinner && <span className="mr-1 text-base font-bold text-emerald-700"></span>}
<span className={cn(isWinner && 'text-emerald-900')}>{s.supplierName}</span>
</div>
{s.displayName && <div className="text-[10px] text-slate-500">{s.displayName}</div>}
{s.note && <div className="text-[10px] text-amber-700">{s.note}</div>}

View File

@ -1468,20 +1468,16 @@ function HangMucCard({
<tr
key={s.id}
className={cn(
'align-top border-l-4',
'align-top border-l-4 transition',
isWinner
? 'border-l-emerald-500 bg-emerald-100/70 font-semibold shadow-sm ring-1 ring-inset ring-emerald-300'
: palette,
? 'border-l-emerald-500 bg-emerald-100/70 font-semibold shadow-sm ring-1 ring-inset ring-emerald-300 hover:bg-emerald-200/70'
: cn(palette, 'hover:bg-white/80 hover:shadow-sm'),
)}
>
<td className="border-r border-slate-200 px-2 py-1.5">
<div className="flex flex-wrap items-center gap-1.5">
<span className="font-medium text-slate-900">{s.supplierName}</span>
{isWinner && (
<span className="inline-flex items-center gap-1 rounded-full bg-emerald-600 px-1.5 py-0.5 text-[9px] font-bold uppercase tracking-wide text-white shadow-sm">
🏆 Trúng thầu
</span>
)}
<div className="font-medium text-slate-900">
{isWinner && <span className="mr-1 text-base font-bold text-emerald-700"></span>}
<span className={cn(isWinner && 'text-emerald-900')}>{s.supplierName}</span>
</div>
{s.displayName && <div className="text-[10px] text-slate-500">{s.displayName}</div>}
{s.note && <div className="text-[10px] text-amber-700">{s.note}</div>}