solution-erp/fe-admin/src/components/DataTable.tsx

import type { ButtonHTMLAttributes, ReactNode } from 'react'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { cn } from '@/lib/cn'

export type Column<T> = {
  key: string
  header: ReactNode
  render: (row: T) => ReactNode
  sortable?: boolean
  width?: string
  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[]
  getRowKey: (row: T) => string
  isLoading?: boolean
  empty?: ReactNode
  sortBy?: string
  sortDesc?: boolean
  onSortChange?: (sortBy: string, sortDesc: boolean) => void
  onRowClick?: (row: T) => void
}

export function DataTable<T>({
  columns,
  rows,
  getRowKey,
  isLoading,
  empty,
  sortBy,
  sortDesc,
  onSortChange,
  onRowClick,
}: Props<T>) {
  return (
    // 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 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}
                className={cn(
                  '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',
                  c.width,
                )}
              >
                {c.sortable && onSortChange ? (
                  <button
                    onClick={() => onSortChange(c.key, sortBy === c.key ? !sortDesc : false)}
                    className="inline-flex items-center gap-1 hover:text-slate-900"
                  >
                    {c.header}
                    {sortBy === c.key && (sortDesc ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronUp className="h-3.5 w-3.5" />)}
                  </button>
                ) : (
                  c.header
                )}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {isLoading &&
            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-3 py-2.5">
                    <div className="h-3 animate-pulse rounded bg-slate-100" />
                  </td>
                ))}
              </tr>
            ))}
          {!isLoading && rows.length === 0 && (
            <tr>
              <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>
          )}
          {!isLoading &&
            rows.map(row => (
              <tr
                key={getRowKey(row)}
                className={cn(
                  'border-t border-slate-100 text-slate-700 transition-colors',
                  onRowClick && 'cursor-pointer hover:bg-brand-50/40',
                )}
                onClick={() => onRowClick?.(row)}
              >
                {columns.map(c => (
                  <td
                    key={c.key}
                    className={cn(
                      'px-3 py-2',
                      c.align === 'right' && 'text-right',
                      c.align === 'center' && 'text-center',
                    )}
                  >
                    {c.render(row)}
                  </td>
                ))}
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  )
}

type PaginationProps = {
  page: number
  pageSize: number
  total: number
  onChange: (page: number) => void
}

export function Pagination({ page, pageSize, total, onChange }: PaginationProps) {
  const totalPages = Math.max(1, Math.ceil(total / pageSize))
  const from = total === 0 ? 0 : (page - 1) * pageSize + 1
  const to = Math.min(page * pageSize, total)

  return (
    <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 items-center gap-1">
        <button
          disabled={page <= 1}
          onClick={() => onChange(page - 1)}
          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-2 tabular-nums">
          Trang {page}/{totalPages}
        </span>
        <button
          disabled={page >= totalPages}
          onClick={() => onChange(page + 1)}
          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>
      </div>
    </div>
  )
}