From 83aae8ea6486c8c0c4b40759b0de0902fbf74e00 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Mon, 11 May 2026 11:57:51 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE-PE:=20Winner=20NCC=20revert=20bad?=
 =?UTF-8?q?ge=20=E2=86=92=20icon=20=E2=9C=93=20=C4=91=E1=BA=ADm=20+=20hove?=
 =?UTF-8?q?r=20transition?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 fe-admin/src/components/pe/PeDetailTabs.tsx | 16 ++++++----------
 fe-user/src/components/pe/PeDetailTabs.tsx  | 16 ++++++----------
 2 files changed, 12 insertions(+), 20 deletions(-)

diff --git a/fe-admin/src/components/pe/PeDetailTabs.tsx b/fe-admin/src/components/pe/PeDetailTabs.tsx
index 73411da..864d940 100644
--- a/fe-admin/src/components/pe/PeDetailTabs.tsx
+++ b/fe-admin/src/components/pe/PeDetailTabs.tsx
@@ -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>}
diff --git a/fe-user/src/components/pe/PeDetailTabs.tsx b/fe-user/src/components/pe/PeDetailTabs.tsx
index 559afad..a3e4466 100644
--- a/fe-user/src/components/pe/PeDetailTabs.tsx
+++ b/fe-user/src/components/pe/PeDetailTabs.tsx
@@ -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>}