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

import type { 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'
}

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 (
    <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">
            {columns.map(c => (
              <th
                key={c.key}
                className={cn(
                  'px-4 py-2.5 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-4 py-3">
                    <div className="h-3 animate-pulse rounded bg-slate-100" />
                  </td>
                ))}
              </tr>
            ))}
          {!isLoading && rows.length === 0 && (
            <tr>
              <td colSpan={columns.length} className="px-4 py-12 text-center text-sm 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-4 py-2.5',
                      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-sm text-slate-600">
      <span>
        {from}–{to} / {total}
      </span>
      <div className="flex 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"
        >
          Trước
        </button>
        <span className="px-3 py-1">
          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"
        >
          Sau
        </button>
      </div>
    </div>
  )
}