[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/ui/Button.tsx

@@ -2,21 +2,26 @@ import { forwardRef, type ButtonHTMLAttributes } from 'react'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/cn'
 
+// Density-first (NAMGROUP convention): text-xs font-semibold, compact heights,
+// rounded-lg. Brand identity kept — primary = brand-600, focus ring brand-500.
+// Decorative shadow dropped; only the filled actions keep a 1px tint shadow for
+// affordance. Variant keys (primary/secondary/outline/ghost/danger) + size keys
+// (sm/md/lg) are STABLE — 51 call-sites depend on them.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:ring-brand-500 active:translate-y-[0.5px]',
+  'inline-flex items-center justify-center gap-1.5 rounded-lg text-xs font-semibold transition-colors disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-white focus-visible:ring-brand-500/70 active:translate-y-[0.5px]',
   {
     variants: {
       variant: {
-        primary: 'bg-brand-600 text-white shadow-sm shadow-brand-600/20 hover:bg-brand-700',
-        secondary: 'bg-slate-100 text-slate-800 hover:bg-slate-200',
-        outline: 'border border-slate-300 bg-white text-slate-700 shadow-sm hover:bg-slate-50 hover:border-slate-400',
+        primary: 'bg-brand-600 text-white shadow-xs shadow-brand-700/20 hover:bg-brand-700',
+        secondary: 'bg-slate-100 text-slate-700 hover:bg-slate-200',
+        outline: 'border border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400',
         ghost: 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
-        danger: 'bg-red-600 text-white shadow-sm shadow-red-600/20 hover:bg-red-700',
+        danger: 'bg-red-600 text-white shadow-xs shadow-red-700/20 hover:bg-red-700',
       },
       size: {
-        sm: 'h-8 px-3 text-xs',
-        md: 'h-9 px-4',
-        lg: 'h-11 px-6 text-base',
+        sm: 'h-7 px-2.5',
+        md: 'h-8 px-3.5',
+        lg: 'h-10 px-5 text-sm',
       },
     },
     defaultVariants: { variant: 'primary', size: 'md' },

fe-admin/src/components/ui/Dialog.tsx

@@ -24,10 +24,11 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
   if (!open) return null
 
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={onClose}>
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/40 p-4 backdrop-blur-[1px]" onClick={onClose}>
       <div
         className={cn(
-          'w-full rounded-lg bg-white shadow-xl',
+          // Density-first: ring-bordered card, restrained shadow (no decorative shadow-xl).
+          'w-full rounded-xl bg-white shadow-lg ring-1 ring-slate-900/5',
           size === 'sm' && 'max-w-md',
           size === 'md' && 'max-w-xl',
           size === 'lg' && 'max-w-3xl',
@@ -35,13 +36,17 @@ export function Dialog({ open, onClose, title, children, footer, size = 'md' }:
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-center justify-between border-b border-slate-200 px-5 py-3">
-          <div className="text-base font-semibold text-slate-900">{title}</div>
-          <button onClick={onClose} className="rounded p-1 text-slate-500 hover:bg-slate-100">
+          <div className="text-sm font-semibold text-slate-800">{title}</div>
+          <button
+            onClick={onClose}
+            aria-label="Đóng"
+            className="-mr-1 rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-700"
+          >
             <X className="h-4 w-4" />
           </button>
         </div>
-        <div className="max-h-[70vh] overflow-auto p-5">{children}</div>
-        {footer && <div className="flex items-center justify-end gap-2 border-t border-slate-200 px-5 py-3">{footer}</div>}
+        <div className="max-h-[70vh] overflow-auto px-5 py-4">{children}</div>
+        {footer && <div className="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50/70 px-5 py-3">{footer}</div>}
       </div>
     </div>
   )

fe-admin/src/components/ui/Input.tsx

@@ -7,9 +7,10 @@ export const Input = forwardRef<HTMLInputElement, Props>(({ className, ...props
   <input
     ref={ref}
     className={cn(
-      'h-9 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900',
-      'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)] placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
+      // Density-first: compact (~34px) rounded-lg, brand focus glow at low opacity.
+      'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm text-slate-900',
+      'placeholder:text-slate-400',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-admin/src/components/ui/Label.tsx

@@ -1,10 +1,13 @@
 import type { LabelHTMLAttributes } from 'react'
 import { cn } from '@/lib/cn'
 
+// Density-first ERP scan-pattern (NAMGROUP convention): uppercase + tracking +
+// muted. slate-500 (not 400) so 11px label still clears WCAG-AA (~4.6:1) — a
+// deliberate accessibility-floor deviation from NAMGROUP's zinc-400.
 export function Label({ className, ...props }: LabelHTMLAttributes<HTMLLabelElement>) {
   return (
     <label
-      className={cn('text-sm font-medium text-slate-700', className)}
+      className={cn('text-[11px] font-semibold uppercase tracking-wider text-slate-500', className)}
       {...props}
     />
   )

fe-admin/src/components/ui/Select.tsx

@@ -7,9 +7,9 @@ export const Select = forwardRef<HTMLSelectElement, Props>(({ className, childre
   <select
     ref={ref}
     className={cn(
-      'h-9 w-full rounded-md border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
-      'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)]',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
+      // Density-first: matches Input — compact rounded-lg, brand focus glow.
+      'h-8 w-full rounded-lg border border-slate-300 bg-white px-3 pr-8 text-sm text-slate-900',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}

fe-admin/src/components/ui/Textarea.tsx

@@ -7,9 +7,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props>(({ className, ...
   <textarea
     ref={ref}
     className={cn(
-      'w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 leading-relaxed',
-      'shadow-[inset_0_1px_0_rgba(15,23,42,0.02)] placeholder:text-slate-400',
-      'transition-[border-color,box-shadow] focus-visible:border-brand-500 focus-visible:ring-2 focus-visible:ring-brand-500/20',
+      // Density-first: matches Input — rounded-lg, brand focus glow.
+      'w-full rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-sm leading-relaxed text-slate-900',
+      'placeholder:text-slate-400',
+      'transition-[border-color,box-shadow] focus-visible:border-brand-400 focus-visible:ring-2 focus-visible:ring-brand-500/15',
       'disabled:cursor-not-allowed disabled:bg-slate-50 disabled:opacity-70',
       className,
     )}