From ea793a43faf4169b4c1839b73125dbbdddda0519 Mon Sep 17 00:00:00 2001
From: pqhuy1987 <pqhuy1987@gmail.com>
Date: Thu, 11 Jun 2026 14:10:00 +0700
Subject: [PATCH] [CLAUDE] FE-Admin+FE-User: brand-accent polish x2 app -
 stripe dinh app + logo zone tint + PageHeader accent bar + thead brand (S58,
 anh yeu cau trang tri ro hon)

---
 fe-admin/src/components/DataTable.tsx  |  6 ++++--
 fe-admin/src/components/Layout.tsx     | 11 ++++++++---
 fe-admin/src/components/PageHeader.tsx | 10 +++++++---
 fe-admin/src/components/TopBar.tsx     |  2 +-
 fe-user/src/components/DataTable.tsx   |  6 ++++--
 fe-user/src/components/Layout.tsx      | 11 ++++++++---
 fe-user/src/components/PageHeader.tsx  | 10 +++++++---
 fe-user/src/components/TopBar.tsx      |  2 +-
 8 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/fe-admin/src/components/DataTable.tsx b/fe-admin/src/components/DataTable.tsx
index 6f56a57..737f9c9 100644
--- a/fe-admin/src/components/DataTable.tsx
+++ b/fe-admin/src/components/DataTable.tsx
@@ -82,8 +82,10 @@ export function DataTable<T>({
     // Density-first: rounded-lg + crisp border (no decorative shadow).
     <div className="overflow-auto rounded-lg border border-slate-200 bg-white">
       <table className="w-full text-[12px]">
-        <thead className="sticky top-0 z-10 bg-slate-50 text-slate-500">
-          <tr className="border-b border-slate-200">
+        {/* thead tint brand — đậm nhận diện hơn slate (mirror fe-user S58);
+            brand-700 semibold uppercase 11px đạt AA trên nền nhạt. */}
+        <thead className="sticky top-0 z-10 bg-brand-50/60 text-brand-700">
+          <tr className="border-b border-brand-100">
             {columns.map(c => (
               <th
                 key={c.key}
diff --git a/fe-admin/src/components/Layout.tsx b/fe-admin/src/components/Layout.tsx
index 4fb2a15..0438846 100644
--- a/fe-admin/src/components/Layout.tsx
+++ b/fe-admin/src/components/Layout.tsx
@@ -257,12 +257,16 @@ export function Layout() {
   const { menu } = useAuth()
 
   return (
-    <div className="flex h-screen">
+    // Brand stripe — dải nhận diện #1F7DC1 đỉnh app (mirror fe-user S58,
+    // anh yêu cầu "trang trí lên 1 tý"; guide accent sparing).
+    <div className="flex h-screen flex-col">
+      <div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
+      <div className="flex min-h-0 flex-1">
       <aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
-        <div className="flex h-16 items-center border-b border-slate-200 px-5">
+        <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
           <Link to="/dashboard" className="flex items-center gap-2.5">
             <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
-            <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Admin</span>
+            <span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">Admin</span>
           </Link>
         </div>
         <nav className="flex-1 space-y-1 overflow-y-auto p-3">
@@ -277,6 +281,7 @@ export function Layout() {
           <Outlet />
         </main>
       </div>
+      </div>
     </div>
   )
 }
diff --git a/fe-admin/src/components/PageHeader.tsx b/fe-admin/src/components/PageHeader.tsx
index 3ed5f2d..70ada14 100644
--- a/fe-admin/src/components/PageHeader.tsx
+++ b/fe-admin/src/components/PageHeader.tsx
@@ -13,9 +13,13 @@ export function PageHeader({
     // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
     // tighter bottom rule. Toolbar/actions sit inline on the right.
     <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
-      <div className="min-w-0">
-        <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
-        {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
+      <div className="flex min-w-0 items-start gap-2.5">
+        {/* Brand accent bar — nhận diện #1F7DC1 per-page (mirror fe-user S58) */}
+        <span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
+        <div className="min-w-0">
+          <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
+          {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
+        </div>
       </div>
       {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
     </div>
diff --git a/fe-admin/src/components/TopBar.tsx b/fe-admin/src/components/TopBar.tsx
index a018fed..43a0777 100644
--- a/fe-admin/src/components/TopBar.tsx
+++ b/fe-admin/src/components/TopBar.tsx
@@ -69,7 +69,7 @@ function UserMenu() {
 export function TopBar({ title }: { title?: string }) {
   return (
     <header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
-      <div className="text-sm font-medium text-slate-500">{title}</div>
+      <div className="text-sm font-semibold text-slate-700">{title}</div>
       <div className="flex items-center gap-2">
         <NotificationBell />
         <UserMenu />
diff --git a/fe-user/src/components/DataTable.tsx b/fe-user/src/components/DataTable.tsx
index 6f56a57..d7127eb 100644
--- a/fe-user/src/components/DataTable.tsx
+++ b/fe-user/src/components/DataTable.tsx
@@ -82,8 +82,10 @@ export function DataTable<T>({
     // Density-first: rounded-lg + crisp border (no decorative shadow).
     <div className="overflow-auto rounded-lg border border-slate-200 bg-white">
       <table className="w-full text-[12px]">
-        <thead className="sticky top-0 z-10 bg-slate-50 text-slate-500">
-          <tr className="border-b border-slate-200">
+        {/* thead tint brand — đậm nhận diện hơn slate (anh yêu cầu "trang trí
+            lên 1 tý" 06-11); brand-700 semibold uppercase 11px đạt AA trên nền nhạt. */}
+        <thead className="sticky top-0 z-10 bg-brand-50/60 text-brand-700">
+          <tr className="border-b border-brand-100">
             {columns.map(c => (
               <th
                 key={c.key}
diff --git a/fe-user/src/components/Layout.tsx b/fe-user/src/components/Layout.tsx
index 7b3632c..28a661e 100644
--- a/fe-user/src/components/Layout.tsx
+++ b/fe-user/src/components/Layout.tsx
@@ -385,12 +385,16 @@ export function Layout() {
 
   return (
     <AccordionContext.Provider value={accordionValue}>
-      <div className="flex h-screen">
+      {/* Brand stripe — dải nhận diện #1F7DC1 chạy suốt đỉnh app (anh yêu cầu
+          "trang trí lên 1 tý" 06-11; guide cho accent sparing — đây là 1 chỗ). */}
+      <div className="flex h-screen flex-col">
+        <div className="h-1 shrink-0 bg-gradient-to-r from-brand-700 via-brand-500 to-brand-600" />
+        <div className="flex min-h-0 flex-1">
         <aside className="flex w-72 flex-col border-r border-slate-200 bg-white xl:w-80">
-          <div className="flex h-16 items-center border-b border-slate-200 px-5">
+          <div className="flex h-16 items-center border-b border-brand-100 bg-gradient-to-b from-brand-50/70 to-transparent px-5">
             <Link to="/dashboard" className="flex items-center gap-2.5">
               <img src="/logo.png" alt="Solutions" className="h-8 w-auto" />
-              <span className="text-[11px] font-semibold uppercase tracking-wider text-slate-400">ERP</span>
+              <span className="text-[11px] font-semibold uppercase tracking-wider text-brand-600/80">ERP</span>
             </Link>
           </div>
           <nav className="flex-1 space-y-1 overflow-y-auto p-3">
@@ -406,6 +410,7 @@ export function Layout() {
             <Outlet />
           </main>
         </div>
+        </div>
       </div>
     </AccordionContext.Provider>
   )
diff --git a/fe-user/src/components/PageHeader.tsx b/fe-user/src/components/PageHeader.tsx
index 3ed5f2d..4888253 100644
--- a/fe-user/src/components/PageHeader.tsx
+++ b/fe-user/src/components/PageHeader.tsx
@@ -13,9 +13,13 @@ export function PageHeader({
     // Density-first (NAMGROUP): compact one-line header, text-[15px] semibold,
     // tighter bottom rule. Toolbar/actions sit inline on the right.
     <div className="mb-5 flex items-start justify-between gap-6 border-b border-slate-200 pb-3.5">
-      <div className="min-w-0">
-        <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
-        {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
+      <div className="flex min-w-0 items-start gap-2.5">
+        {/* Brand accent bar — nhận diện #1F7DC1 per-page (anh yêu cầu 06-11) */}
+        <span aria-hidden className="mt-0.5 h-4 w-1 shrink-0 rounded-full bg-gradient-to-b from-brand-500 to-brand-700" />
+        <div className="min-w-0">
+          <h1 className="text-[15px] font-semibold leading-tight text-slate-800">{title}</h1>
+          {description && <p className="mt-1 text-xs leading-relaxed text-slate-500">{description}</p>}
+        </div>
       </div>
       {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
     </div>
diff --git a/fe-user/src/components/TopBar.tsx b/fe-user/src/components/TopBar.tsx
index a018fed..43a0777 100644
--- a/fe-user/src/components/TopBar.tsx
+++ b/fe-user/src/components/TopBar.tsx
@@ -69,7 +69,7 @@ function UserMenu() {
 export function TopBar({ title }: { title?: string }) {
   return (
     <header className="flex h-14 items-center justify-between border-b border-slate-200 bg-white px-6">
-      <div className="text-sm font-medium text-slate-500">{title}</div>
+      <div className="text-sm font-semibold text-slate-700">{title}</div>
       <div className="flex items-center gap-2">
         <NotificationBell />
         <UserMenu />