@stacksjs/defaults 0.75.263 → 0.75.267

package/resources/components/Dashboard/App/SourceInventory.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
 
@@ -44,9 +46,7 @@ const page = derived(() => mode() === 'actions'
       empty: 'No Action modules were found.',
       scaffold: 'buddy make:action MyAction',
       icon: 'i-hugeicons-energy',
-      detailLabel: 'Method',
       note: 'Application files override matching framework defaults.',
-      showOrigin: true,
       stats: [
         { key: 'total', label: 'Total Actions' },
         { key: 'application', label: 'Application Overrides' },
@@ -60,9 +60,7 @@ const page = derived(() => mode() === 'actions'
       empty: 'No command files in app/Commands.',
       scaffold: 'buddy make:command my-command',
       icon: 'i-hugeicons-command-line',
-      detailLabel: 'Aliases and options',
       note: 'Every file in app/Commands is a command. The optional app/Commands.ts only orders, aliases or disables them.',
-      showOrigin: false,
       stats: [
         { key: 'total', label: 'Commands' },
         { key: 'registered', label: 'Registry Entries' },
@@ -90,13 +88,6 @@ function statValue(key: string): number {
   return Number(stats()[key] || 0)
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Unknown'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? 'Unknown' : date.toLocaleString()
-}
-
 function formatAliases(item: SourceItem): string {
   return item.aliases?.length ? item.aliases.join(', ') : 'None'
 }
@@ -105,14 +96,67 @@ function formatOptions(item: SourceItem): string {
   return item.options?.length ? item.options.join(', ') : 'None'
 }
 
-function methodClass(method = 'ANY'): string {
+/** Read-only methods, writes, and the catch-all, as the hand-rolled pill coloured them. */
+function methodTone(method = 'ANY'): string {
   if (['GET', 'HEAD', 'OPTIONS'].includes(method))
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+    return 'read'
   if (method === 'ANY')
-    return 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'any'
+  return 'write'
 }
 
+const NAME_COLUMN = { key: 'name', label: 'Name', sortable: true, subtitleKey: 'description', class: 'font-medium text-neutral-900 dark:text-white' }
+const PATH_COLUMN = { key: 'path', label: 'Path', sortable: true, class: 'font-mono text-neutral-600 text-xs dark:text-neutral-300' }
+const MODIFIED_COLUMN = { key: 'modifiedAt', label: 'Modified', type: 'datetime' as const, sortable: true, align: 'right' as const, emptyText: 'Unknown', class: 'whitespace-nowrap' }
+
+/**
+ * Actions show a method and where the file comes from. Commands have one
+ * root, so their second column is what can be typed instead.
+ */
+const COLUMNS_BY_MODE = {
+  actions: [
+    NAME_COLUMN,
+    {
+      key: 'methodTone',
+      label: 'Method',
+      type: 'badge' as const,
+      sortable: true,
+      badgeLabelKey: 'methodLabel',
+      badgeClasses: {
+        read: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+        any: 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800',
+        write: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+      },
+    },
+    {
+      key: 'origin',
+      label: 'Origin',
+      type: 'badge' as const,
+      sortable: true,
+      badgeClasses: {
+        Application: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+        Framework: 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800',
+      },
+    },
+    PATH_COLUMN,
+    MODIFIED_COLUMN,
+  ],
+  commands: [
+    NAME_COLUMN,
+    { key: 'aliasesLabel', label: 'Aliases', sortable: true, subtitleKey: 'optionsLabel', class: 'text-neutral-700 text-xs dark:text-neutral-300' },
+    PATH_COLUMN,
+    MODIFIED_COLUMN,
+  ],
+}
+
+const itemRows = derived(() => filteredItems().map(item => ({
+  ...item,
+  methodTone: methodTone(item.method),
+  methodLabel: item.method || 'ANY',
+  aliasesLabel: `Aliases: ${formatAliases(item)}`,
+  optionsLabel: `Options: ${formatOptions(item)}`,
+})))
+
 async function loadInventory(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -205,50 +249,15 @@ onMount(() => {
       </label>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center py-16 text-neutral-500 text-sm dark:text-neutral-400">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Reading source files...
-    </div>
-
-    <EmptyState
-      :if="!loading() && !loadError() && filteredItems().length === 0"
-      :icon="page().icon"
-      :title="search() ? 'No matching source files' : page().empty"
-      :description="search() ? 'Try a different name, path, method, or alias.' : 'Use the scaffold command to add one through the native framework workflow.'"
+    <Table
+      :columns="COLUMNS_BY_MODE[mode()]"
+      :data="itemRows()"
+      :loading="loading()"
+      row-key="path"
+      paginated
+      :page-size="25"
+      :empty-title="search() ? 'No matching source files' : page().empty"
+      :empty-description="search() ? 'Try a different name, path, method, or alias.' : 'Use the scaffold command to add one through the native framework workflow.'"
     />
-
-    <div :if="!loading() && filteredItems().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr>
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Name</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">{{ page().detailLabel }}</th>
-            <th :if="page().showOrigin" class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Origin</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Path</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Modified</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <tr :for="item in filteredItems()">
-            <td class="pl-5 pr-4 py-3.5">
-              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ item.name }}</p>
-              <p class="mt-0.5 max-w-md text-neutral-500 text-xs dark:text-neutral-400">{{ item.description }}</p>
-            </td>
-            <td class="px-4 py-3.5">
-              <span :if="mode() === 'actions'" :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + methodClass(item.method)">{{ item.method || 'ANY' }}</span>
-              <div :if="mode() === 'commands'" class="space-y-1 text-xs">
-                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Aliases:</span> {{ formatAliases(item) }}</p>
-                <p class="text-neutral-700 dark:text-neutral-300"><span class="text-neutral-500 dark:text-neutral-400">Options:</span> {{ formatOptions(item) }}</p>
-              </div>
-            </td>
-            <td :if="page().showOrigin" class="px-4 py-3.5">
-              <span :class="'inline-flex px-2 py-0.5 font-medium text-xs rounded ' + (item.origin === 'Application' ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40' : 'text-neutral-700 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-800')">{{ item.origin }}</span>
-            </td>
-            <td class="px-4 py-3.5 font-mono text-neutral-600 text-xs dark:text-neutral-300">{{ item.path }}</td>
-            <td class="pr-5 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(item.modifiedAt) }}</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
   </Card>
 </div>

package/resources/components/Dashboard/Auth/AccessTokens.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { authStore } from '../../../../views/dashboard/stores/auth'
@@ -59,11 +61,31 @@ function tokenStatus(token: AccessTokenRow): 'active' | 'expired' {
   return new Date(token.expires_at).getTime() <= Date.now() ? 'expired' : 'active'
 }
 
-function statusClass(token: AccessTokenRow): string {
-  return tokenStatus(token) === 'active'
-    ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40'
-    : 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
-}
+const TOKEN_COLUMNS = [
+  { key: 'name', label: 'Token', sortable: true, subtitleKey: 'createdLabel', class: 'font-medium text-neutral-900 dark:text-white' },
+  { key: 'scopesLabel', label: 'Scopes', slotted: true },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      expired: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+    },
+    badgeLabels: { active: 'Active', expired: 'Expired' },
+  },
+  { key: 'expires_at', label: 'Expires', align: 'right' as const, sortable: true, slotted: true, searchable: false },
+]
+
+const tokenRows = derived(() => tokens().map(token => ({
+  ...token,
+  createdLabel: `Created ${formatDate(token.created_at)}`,
+  // Searchable text for the scope pills the cell draws.
+  scopesLabel: token.scopes.join(' '),
+  status: tokenStatus(token),
+  expiresLabel: formatDate(token.expires_at),
+})))
 
 function formatDate(value: string | null): string {
   if (!value)
@@ -270,38 +292,36 @@ onMount(() => {
       </template>
     </EmptyState>
 
-    <div :if="!loading() && !authenticationRequired() && tokens().length > 0" class="overflow-x-auto">
-      <table class="w-full">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/50">
-          <tr>
-            <th class="pl-5 pr-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Token</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Scopes</th>
-            <th class="px-4 py-3 font-semibold text-left text-neutral-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-            <th class="px-4 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Expires</th>
-            <th class="pr-5 py-3 font-semibold text-neutral-500 text-right text-xs tracking-wider uppercase dark:text-neutral-400">Action</th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-700">
-          <tr :for="token in tokens()">
-            <td class="pl-5 pr-4 py-3.5">
-              <p class="font-medium text-neutral-900 text-sm dark:text-white">{{ token.name }}</p>
-              <p class="mt-0.5 text-neutral-500 text-xs dark:text-neutral-400">Created {{ formatDate(token.created_at) }}</p>
-            </td>
-            <td class="px-4 py-3.5">
-              <div class="flex flex-wrap gap-1">
-                <span :for="scope in token.scopes" class="inline-flex px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded">{{ scope }}</span>
-              </div>
-            </td>
-            <td class="px-4 py-3.5"><span :class="'inline-flex px-2 py-0.5 font-medium text-xs capitalize rounded ' + statusClass(token)">{{ tokenStatus(token) }}</span></td>
-            <td class="px-4 py-3.5 text-neutral-500 text-right text-xs whitespace-nowrap dark:text-neutral-400">{{ formatDate(token.expires_at) }}</td>
-            <td class="pr-5 py-3.5 text-right whitespace-nowrap">
-              <Button variant="danger" size="sm" :loading="revoking() === token.id" @click="confirmingRevoke.set(token.id)">
-                {{ revoking() === token.id ? 'Revoking...' : 'Revoke' }}
-              </Button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    {{--
+      The page keeps its loading, sign-in and empty states; the table brings
+      sorting and paging. Scopes are slotted for their pills and expiry for
+      "Never", so it sorts on the date itself.
+    --}}
+    <div :if="!loading() && !authenticationRequired() && tokens().length > 0">
+      <Table :columns="TOKEN_COLUMNS" :data="tokenRows()" paginated :page-size="25">
+        <template #cell="{ row, column }">
+          <template :if="column.key === 'scopesLabel'">
+            <div class="flex flex-wrap gap-1">
+              <template :for="scope in row.scopes" :key="scope">
+                <span class="inline-flex px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded" x-text="scope"></span>
+              </template>
+            </div>
+          </template>
+          <template :else>
+            <span class="text-neutral-500 text-xs whitespace-nowrap dark:text-neutral-400" x-text="row.expiresLabel"></span>
+          </template>
+        </template>
+        <template #actions="{ row }">
+          <div class="text-right whitespace-nowrap">
+            <template :if="revoking() === row.id">
+              <Button variant="danger" size="sm" loading>Revoking...</Button>
+            </template>
+            <template :else>
+              <Button variant="danger" size="sm" @click="confirmingRevoke.set(row.id)">Revoke</Button>
+            </template>
+          </div>
+        </template>
+      </Table>
     </div>
   </Card>
 

package/resources/components/Dashboard/Billing/BillingTransactionHistory.stx

@@ -1,13 +1,27 @@
+@import('../UI/Table')
+
 <script client>
 import type { BillingTransaction } from '../../../../functions/billing/dashboard'
 
 const transactions = useReactiveProp('transactions', [] as BillingTransaction[])
 
-function amount(transaction: BillingTransaction): string {
-  if (transaction.amount === null)
-    return 'Not reported'
-  return `${new Intl.NumberFormat().format(transaction.amount)} minor units`
-}
+const COLUMNS = [
+  { key: 'name', label: 'Transaction', sortable: true, emptyText: 'Unnamed transaction', subtitleKey: 'description', class: 'font-medium text-gray-900 max-w-lg dark:text-white' },
+  {
+    key: 'typeLabel',
+    label: 'Type',
+    type: 'badge' as const,
+    sortable: true,
+  },
+  { key: 'amountLabel', label: 'Amount', class: 'whitespace-nowrap', searchable: false },
+  { key: 'providerId', label: 'Provider reference', emptyText: 'Not reported', class: 'font-mono text-xs' },
+]
+
+const rows = derived(() => transactions().map(transaction => ({
+  ...transaction,
+  typeLabel: (transaction.type || 'unknown').replace(/\b\w/g, letter => letter.toUpperCase()),
+  amountLabel: transaction.amount === null ? 'Not reported' : `${new Intl.NumberFormat().format(transaction.amount)} minor units`,
+})))
 </script>
 
 <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
@@ -19,32 +33,12 @@ function amount(transaction: BillingTransaction): string {
     <span class="h-5 w-5 text-gray-400 i-hugeicons-transaction-history"></span>
   </header>
 
-  <div :if="transactions().length === 0" class="px-6 py-14 text-center">
-    <span class="inline-block h-7 w-7 text-gray-400 i-hugeicons-receipt-dollar"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No transactions recorded</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Successful persisted billing transactions will appear here.</p>
-  </div>
-
-  <div :else class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-900/50">
-        <tr>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Transaction</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Type</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
-          <th scope="col" class="px-5 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Provider reference</th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="transaction in transactions()" :key="transaction.id">
-          <tr>
-            <td class="px-5 py-4 max-w-lg"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ transaction.name || 'Unnamed transaction' }}</p><p :if="transaction.description" class="mt-1 text-gray-500 text-xs truncate dark:text-neutral-400">{{ transaction.description }}</p></td>
-            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 capitalize font-medium text-gray-700 text-xs dark:text-neutral-200 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ transaction.type || 'unknown' }}</span></td>
-            <td class="px-5 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ amount(transaction) }}</td>
-            <td class="px-5 py-4 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ transaction.providerId || 'Not reported' }}</td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
+  <Table
+    :columns="COLUMNS"
+    :data="rows()"
+    paginated
+    :page-size="25"
+    empty-title="No transactions recorded"
+    empty-description="Successful persisted billing transactions will appear here."
+  />
 </section>

package/resources/components/Dashboard/Commerce/CommercePaymentsTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import { formatCurrency } from '@stacksjs/commerce/money'
@@ -6,61 +8,95 @@ const records = useReactiveProp('records', [] as PaymentRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
+/** `partiallyRefunded` and `bank_transfer` as words, each capitalized. */
 function label(value: string): string {
-  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-}
-
-function money(value: number, currency: string): string {
-  return formatCurrency(value, currency)
-}
-
-function date(value: string): string {
-  const parsed = new Date(value.includes('T') ? value : value.replace(' ', 'T'))
-  return !value || Number.isNaN(parsed.getTime())
-    ? 'Unknown'
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(parsed)
+  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ').replace(/\b\w/g, letter => letter.toUpperCase())
 }
 
-function statusClass(status: string): string {
+/**
+ * The status pill's colour, which is a tone rather than the status itself so
+ * that every status the ledger has not named still reads as pending, as the
+ * hand-rolled pill did.
+ */
+function statusTone(status: string): string {
   if (status === 'completed' || status === 'succeeded')
-    return 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40'
+    return 'settled'
   if (status === 'failed')
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+    return 'failed'
   if (status === 'refunded' || status === 'partiallyRefunded')
-    return 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'refunded'
+  return 'pending'
+}
+
+/**
+ * Only the amount is slotted, for its refund line, whose colour says whether
+ * the refund was recorded. The rest are values with a second line, which is
+ * `subtitleKey`.
+ */
+const COLUMNS = [
+  { key: 'paymentLabel', label: 'Payment', sortable: true, subtitleKey: 'referenceLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'billingLabel', label: 'Billing', sortable: true, subtitleKey: 'orderLabel' },
+  { key: 'amount', label: 'Amount', sortable: true, slotted: true },
+  // Capitalized in `label()` rather than with a class, which would reach the
+  // processor line beneath it too.
+  { key: 'methodLabel', label: 'Method', sortable: true, subtitleKey: 'processorLabel' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    badgeClasses: {
+      settled: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      refunded: 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40',
+      pending: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View payment', icon: 'i-hugeicons-view' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  paymentLabel: `#${record.id}`,
+  referenceLabel: record.referenceNumber || record.transactionId || 'No reference',
+  billingLabel: record.billingEmail || 'No billing email',
+  orderLabel: record.orderId ? `Order #${record.orderId}` : 'No linked order',
+  amountLabel: formatCurrency(record.amount, record.currency),
+  refundLabel: record.refundAmount > 0 ? `Refunded ${formatCurrency(record.refundAmount, record.currency)}` : '',
+  refundMissing: record.refundAmount <= 0 && record.status === 'refunded' && !record.refundRecorded,
+  methodLabel: label(record.method),
+  processorLabel: record.cardBrand || record.cardLastFour
+    ? [record.cardBrand, record.cardLastFour].filter(Boolean).join(' · ')
+    : record.paymentProvider || 'No processor details',
+  statusTone: statusTone(record.status),
+  statusLabel: label(record.status),
+})))
+
+function handleRowAction(payload: { action: string, row: PaymentRecord }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <div :if="loading() && records().length === 0" class="flex items-center justify-center py-16 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>Loading payments</div>
-  <div :else-if="records().length === 0" class="px-6 py-16 text-center"><span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-credit-card"></span><p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No payments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters to inspect another part of the native ledger.</p></div>
-  <div :else class="overflow-x-auto">
-    <table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700">
-      <thead class="bg-gray-50 dark:bg-neutral-900/50">
-        <tr>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Payment</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Billing</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Method</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Created</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">#{{ record.id }}</p><p class="mt-1 max-w-44 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.referenceNumber || record.transactionId || 'No reference' }}</p></td>
-            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.billingEmail || 'No billing email' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.orderId ? 'Order #' + record.orderId : 'No linked order' }}</p></td>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ money(record.amount, record.currency) }}</p><p :if="record.refundAmount > 0" class="mt-1 text-violet-600 text-xs dark:text-violet-300">Refunded {{ money(record.refundAmount, record.currency) }}</p><p :else-if="record.status === 'refunded' && !record.refundRecorded" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p></td>
-            <td class="px-4 py-4"><p class="capitalize text-gray-700 text-sm dark:text-neutral-200">{{ label(record.method) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.cardBrand }}<span :if="record.cardLastFour"> · {{ record.cardLastFour }}</span><span :if="!record.cardBrand && !record.cardLastFour">{{ record.paymentProvider || 'No processor details' }}</span></p></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(record.status)">{{ label(record.status) }}</span></td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ date(record.createdAt) }}</td>
-            <td class="px-4 py-4 text-right"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View payment ' + record.id" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="id"
+  paginated
+  :page-size="25"
+  empty-title="No payments found"
+  empty-description="Adjust the filters to inspect another part of the native ledger."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.amountLabel"></p>
+    <p :if="row.refundLabel" class="mt-1 text-violet-600 text-xs dark:text-violet-300" x-text="row.refundLabel"></p>
+    <p :if="row.refundMissing" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p>
+  </template>
+</Table>