From 6983609c7b186af2142702b803da99b99b3a30cf Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Tue, 16 Jun 2026 19:34:35 +0700
Subject: [PATCH] =?UTF-8?q?[CLAUDE]=20FE:=20H=E1=BB=93=20s=C6=A1=20NS=20?=
 =?UTF-8?q?=E2=80=94=20header=20chi=20ti=E1=BA=BFt=20NV=20n=E1=BB=95i=20b?=
 =?UTF-8?q?=E1=BA=ADt=20(t=C3=AAn=20text-xl=20extrabold=20+=20drop-shadow?=
 =?UTF-8?q?=20=C2=B7=20meta=2013px=20font-medium=20tr=E1=BA=AFng=20=C2=B7?=
 =?UTF-8?q?=20badge=20tr=E1=BA=A1ng=20th=C3=A1i=20m=C3=A0u=20emerald/amber?=
 =?UTF-8?q?/slate)=20=E2=80=94=20x2=20app=20SHA256?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 fe-admin/src/pages/hrm/EmployeesListPage.tsx | 16 ++++++++++------
 fe-user/src/pages/hrm/EmployeesListPage.tsx  | 16 ++++++++++------
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/fe-admin/src/pages/hrm/EmployeesListPage.tsx b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
index 74bb43e..074fdaa 100644
--- a/fe-admin/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-admin/src/pages/hrm/EmployeesListPage.tsx
@@ -650,14 +650,18 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
               {initials(detail.fullName)}
             </span>
             <div className="min-w-0">
-              <h2 className="truncate text-lg font-bold leading-tight text-white">{detail.fullName ?? '—'}</h2>
-              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-white/85">
-                <span className="font-mono">{detail.employeeCode}</span>
-                {detail.departmentName && (<><span className="opacity-50">•</span><span className="truncate">{detail.departmentName}</span></>)}
-                {detail.workLocation && (<><span className="opacity-50">•</span><span className="truncate">{detail.workLocation}</span></>)}
+              <h2 className="truncate text-xl font-extrabold leading-tight text-white drop-shadow-sm">{detail.fullName ?? '—'}</h2>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] font-medium text-white">
+                <span className="font-mono font-semibold tracking-tight">{detail.employeeCode}</span>
+                {detail.departmentName && (<><span className="text-white/55">•</span><span className="truncate">{detail.departmentName}</span></>)}
+                {detail.workLocation && (<><span className="text-white/55">•</span><span className="truncate">{detail.workLocation}</span></>)}
               </div>
               <div className="mt-2">
-                <span className="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-white/25">
+                <span className={cn(
+                  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold shadow-sm ring-1 ring-black/5',
+                  EmployeeStatusColor[detail.employeeStatus],
+                )}>
+                  <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                   {EmployeeStatusLabel[detail.employeeStatus]}
                 </span>
               </div>
diff --git a/fe-user/src/pages/hrm/EmployeesListPage.tsx b/fe-user/src/pages/hrm/EmployeesListPage.tsx
index 74bb43e..074fdaa 100644
--- a/fe-user/src/pages/hrm/EmployeesListPage.tsx
+++ b/fe-user/src/pages/hrm/EmployeesListPage.tsx
@@ -650,14 +650,18 @@ function EmployeeDetailTabs({ detail, onDelete }: { detail: EmployeeDetail; onDe
               {initials(detail.fullName)}
             </span>
             <div className="min-w-0">
-              <h2 className="truncate text-lg font-bold leading-tight text-white">{detail.fullName ?? '—'}</h2>
-              <div className="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-white/85">
-                <span className="font-mono">{detail.employeeCode}</span>
-                {detail.departmentName && (<><span className="opacity-50">•</span><span className="truncate">{detail.departmentName}</span></>)}
-                {detail.workLocation && (<><span className="opacity-50">•</span><span className="truncate">{detail.workLocation}</span></>)}
+              <h2 className="truncate text-xl font-extrabold leading-tight text-white drop-shadow-sm">{detail.fullName ?? '—'}</h2>
+              <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px] font-medium text-white">
+                <span className="font-mono font-semibold tracking-tight">{detail.employeeCode}</span>
+                {detail.departmentName && (<><span className="text-white/55">•</span><span className="truncate">{detail.departmentName}</span></>)}
+                {detail.workLocation && (<><span className="text-white/55">•</span><span className="truncate">{detail.workLocation}</span></>)}
               </div>
               <div className="mt-2">
-                <span className="inline-flex items-center rounded-full bg-white/20 px-2 py-0.5 text-[11px] font-medium text-white ring-1 ring-white/25">
+                <span className={cn(
+                  'inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-bold shadow-sm ring-1 ring-black/5',
+                  EmployeeStatusColor[detail.employeeStatus],
+                )}>
+                  <span className="h-1.5 w-1.5 rounded-full bg-current opacity-70" />
                   {EmployeeStatusLabel[detail.employeeStatus]}
                 </span>
               </div>