[CLAUDE] FE-Admin: redesign Phase 1 — density-first design system (NAMGROUP-ref, giữ brand)

Tham khảo NAMGROUP density conventions, GIỮ brand #1F7DC1 + Be Vietnam Pro.
- index.css: density heading ladder (semibold, drop font-bold) + .label-eyebrow util
- 6 UI primitives (Button/Input/Label/Select/Textarea/Dialog): text-xs font-semibold, py-1.5 ≤36px, rounded-lg, brand focus-ring
- 6 shell (DataTable sticky-thead+RowActions/Layout brand-rail/TopBar/PageHeader/PhaseBadge/EmptyState)
- DashboardPage flagship: KPI cards + brand-tinted icon chips + uppercase labels

Visual-only — functionality unchanged (Button variant/size keys stable 51 call-sites, props/forwardRef intact). build 0 TS err. reviewer PASS 0 blocker (2 minor slate-400 hint a11y defer). fe-admin only (fe-user mirror = Phase 3). Dashboard live-visual blocked by dev auth-rig → xem live sau deploy.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

fe-admin/src/components/DataTable.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react'
+import type { ButtonHTMLAttributes, ReactNode } from 'react'
 import { ChevronDown, ChevronUp } from 'lucide-react'
 import { cn } from '@/lib/cn'
 
@@ -11,6 +11,50 @@ export type Column<T> = {
   align?: 'left' | 'center' | 'right'
 }
 
+// Always-visible row-action button (NAMGROUP convention: NEVER hide actions
+// behind opacity-0 group-hover — touch devices can't reveal them). 7×7 icon
+// button, tone-tinted hover. Wrap an action cell with <RowActions> to stop the
+// row's onClick from firing when a button is pressed.
+type RowActionTone = 'default' | 'brand' | 'danger' | 'success'
+
+const ROW_ACTION_TONE: Record<RowActionTone, string> = {
+  default: 'text-slate-500 hover:bg-slate-100 hover:text-slate-800',
+  brand: 'text-slate-500 hover:bg-brand-50 hover:text-brand-700',
+  danger: 'text-slate-500 hover:bg-red-50 hover:text-red-600',
+  success: 'text-slate-500 hover:bg-emerald-50 hover:text-emerald-600',
+}
+
+export function RowActions({ children, className }: { children: ReactNode; className?: string }) {
+  return (
+    <div
+      className={cn('flex items-center justify-end gap-0.5', className)}
+      onClick={e => e.stopPropagation()}
+    >
+      {children}
+    </div>
+  )
+}
+
+export function RowActionButton({
+  tone = 'default',
+  className,
+  ...props
+}: ButtonHTMLAttributes<HTMLButtonElement> & { tone?: RowActionTone }) {
+  return (
+    <button
+      type="button"
+      className={cn(
+        'inline-flex h-7 w-7 items-center justify-center rounded-md transition-colors',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/60',
+        'disabled:pointer-events-none disabled:opacity-40',
+        ROW_ACTION_TONE[tone],
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
 type Props<T> = {
   columns: Column<T>[]
   rows: T[]
@@ -35,15 +79,16 @@ export function DataTable<T>({
   onRowClick,
 }: Props<T>) {
   return (
-    <div className="overflow-auto rounded-xl border border-slate-200/80 bg-white shadow-sm">
-      <table className="w-full text-sm">
-        <thead className="bg-slate-50/60 text-slate-600">
-          <tr className="border-b border-slate-200/80">
+    // 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">
             {columns.map(c => (
               <th
                 key={c.key}
                 className={cn(
-                  'px-4 py-2.5 text-[11px] font-semibold uppercase tracking-wider',
+                  'px-3 py-2 text-[11px] font-semibold uppercase tracking-wider',
                   c.align === 'right' && 'text-right',
                   c.align === 'center' && 'text-center',
                   c.align !== 'right' && c.align !== 'center' && 'text-left',
@@ -70,7 +115,7 @@ export function DataTable<T>({
             Array.from({ length: 5 }).map((_, i) => (
               <tr key={`sk-${i}`} className="border-t border-slate-100">
                 {columns.map(c => (
-                  <td key={c.key} className="px-4 py-3">
+                  <td key={c.key} className="px-3 py-2.5">
                     <div className="h-3 animate-pulse rounded bg-slate-100" />
                   </td>
                 ))}
@@ -78,7 +123,7 @@ export function DataTable<T>({
             ))}
           {!isLoading && rows.length === 0 && (
             <tr>
-              <td colSpan={columns.length} className="px-4 py-12 text-center text-sm text-slate-400">
+              <td colSpan={columns.length} className="px-3 py-12 text-center text-[13px] text-slate-400">
                 {empty ?? 'Không có dữ liệu'}
               </td>
             </tr>
@@ -97,7 +142,7 @@ export function DataTable<T>({
                   <td
                     key={c.key}
                     className={cn(
-                      'px-4 py-2.5',
+                      'px-3 py-2',
                       c.align === 'right' && 'text-right',
                       c.align === 'center' && 'text-center',
                     )}
@@ -126,25 +171,25 @@ export function Pagination({ page, pageSize, total, onChange }: PaginationProps)
   const to = Math.min(page * pageSize, total)
 
   return (
-    <div className="flex items-center justify-between py-3 text-sm text-slate-600">
-      <span>
+    <div className="flex items-center justify-between py-3 text-[12px] text-slate-500">
+      <span className="tabular-nums">
         {from}–{to} / {total}
       </span>
-      <div className="flex gap-1">
+      <div className="flex items-center gap-1">
         <button
           disabled={page <= 1}
           onClick={() => onChange(page - 1)}
-          className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
+          className="rounded-lg border border-slate-300 bg-white px-2.5 py-1 font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white"
         >
           Trước
         </button>
-        <span className="px-3 py-1">
+        <span className="px-2 tabular-nums">
           Trang {page}/{totalPages}
         </span>
         <button
           disabled={page >= totalPages}
           onClick={() => onChange(page + 1)}
-          className="rounded-md border border-slate-300 bg-white px-3 py-1 disabled:opacity-50"
+          className="rounded-lg border border-slate-300 bg-white px-2.5 py-1 font-medium text-slate-700 transition-colors hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-white"
         >
           Sau
         </button>