Data card list

import { DataCardList } from "@payglocal_ui/flux-ui";

// A card list is not a table with its columns hidden — it picks a handful
// of fields, gives them a hierarchy and drops the rest. So it is its own
// component rather than a mode of DataTableCard, which would otherwise
// carry two layouts and a breakpoint, and make every table pay for props
// it does not use.
//
// It owns the surface: the bordered container, the loading skeletons, the
// empty and error states, and the pager. The card itself stays with the
// feature, via renderCard — that is the part that genuinely differs.
<DataCardList
  rows={rows}
  rowKey={(r) => r.id}
  renderCard={(row) => <TransactionCard row={row} onOpen={open} />}
  renderSkeleton={() => <TransactionCardSkeleton />}
  emptyState={<PlaceholderState variant="no-transactions" size="sm" />}
  errorState={isError ? errorPanel : undefined}
  pagination={pagination}
/>

// ── Pair it with the table using CSS, never a breakpoint hook ─────────
// Both mount; CSS shows one. A JS hook has to guess on the server, so one
// cohort sees the wrong layout on first paint, and resizing across the
// breakpoint unmounts the visible half — taking scroll position and any
// open row with it.
<DataTableCard className="hidden lg:block" … pagination={pagination} />
<DataCardList  className="lg:hidden"      … pagination={pagination} />

// Hand both the SAME pagination object and the two surfaces cannot
// disagree about which page they are on. The list renders it as a compact
// Prev / Page X of Y / Next — a row of page numbers is the first thing to
// go wrong on a phone — and shows no "of N" in cursor mode, where there
// is no total to be honest about.