@stacksjs/defaults 0.75.262 → 0.75.264

package/bootstrap.ts

@@ -23,7 +23,8 @@
 
 import { config, feature } from '@stacksjs/config'
 import { frameworkPath } from '@stacksjs/path'
-import { bundleMounts, DEFAULT_ROUTE_BUNDLE_FEATURES, route } from '@stacksjs/router'
+import { log } from '@stacksjs/logging/runtime'
+import { bundleMounts, DEFAULT_ROUTE_BUNDLE_FEATURES, route, withRouteAdmission } from '@stacksjs/router'
 import MaintenanceMiddleware from './app/Middleware/Maintenance'
 
 // Global maintenance / coming-soon gate. Registered first so the
@@ -71,116 +72,135 @@ function mounts(bundle: keyof typeof DEFAULT_ROUTE_BUNDLE_FEATURES): boolean {
   return bundleMounts(selection, bundle, feature(DEFAULT_ROUTE_BUNDLE_FEATURES[bundle]))
 }
 
-// Auth: login, registration, logout, refresh/revoke, passkeys, TOTP 2FA and
-// password reset. Split out of dashboard.ts so it can be mounted on its own
-// (stacksjs/stacks#2229) — previously the only way to get `/login` was to
-// activate `dashboard` and take the storefront, reviews, AI and voice surface
-// with it.
-//
-// Registered BEFORE dashboard.ts, which is where these lived, so the
-// first-registration-wins order among framework routes is unchanged.
-//
-// Deliberately NOT gated on `feature('auth')`, despite the issue asking for
-// it: `config/auth.ts` ships in every app with `enabled: true`, so that gate
-// is true everywhere and would mount the auth surface — including
-// `/generate-two-factor-secret`, `/logout-all` and `/auth/tokens` — in apps
-// currently running with `dashboard` off. Widening an app's public surface on
-// upgrade is not something a refactor gets to do silently.
-if (mounts('auth'))
-  await route.register(frameworkPath('defaults/routes/auth.ts'))
-
-// The rest of dashboard.ts: email subscribe, storefront cart/checkout,
-// reviews, sitemap, AI, voice, and the admin dashboard's REST surface. Still
-// one file and still one gate — splitting auth out was the case with a
-// reporter behind it; marketing.ts / commerce.ts / monitoring.ts remain the
-// obvious next cuts.
-//
-// Apps that need only a slice can also define the routes they want directly
-// in `routes/api.ts` — first-registration-wins means the user version takes
-// priority.
-if (mounts('dashboard')) {
-  await route.register(frameworkPath('defaults/routes/dashboard.ts'))
-  // JSON endpoints for the dev dashboard UI. Kept separate from the view
-  // routes above so the data layer is one obvious file to grep.
-  await route.register(frameworkPath('defaults/routes/dashboard-api.ts'))
-  // The dev dashboard boots through this file rather than the application
-  // router's importRoutes() path, so load model-declared useApi routes here too.
+/**
+ * Every default bundle this app mounts, registered in one place so the
+ * admission check below covers all of them.
+ */
+async function registerDefaultBundles(): Promise<void> {
+  // Auth: login, registration, logout, refresh/revoke, passkeys, TOTP 2FA and
+  // password reset. Split out of dashboard.ts so it can be mounted on its own
+  // (stacksjs/stacks#2229) — previously the only way to get `/login` was to
+  // activate `dashboard` and take the storefront, reviews, AI and voice surface
+  // with it.
+  //
+  // Registered BEFORE dashboard.ts, which is where these lived, so the
+  // first-registration-wins order among framework routes is unchanged.
   //
-  // Package first, vendored second, matching importRoutes() and start.ts. This
-  // line used to import the vendored copy only, and nothing re-vendors that
-  // file: `@stacksjs/orm` publishes `dist/routes.js` and no `routes.ts`, so an
-  // app kept whatever generator its copy froze at however often it upgraded.
-  // An old enough copy compares route paths literally, so a generated
-  // `PATCH /api/sites/{id}` does not recognise a hand-written
-  // `/api/sites/{siteId}` as the same endpoint and registers alongside it,
-  // and the hand-written handler's authorization check stops running
-  // (stacksjs/stacks#2364).
+  // Deliberately NOT gated on `feature('auth')`, despite the issue asking for
+  // it: `config/auth.ts` ships in every app with `enabled: true`, so that gate
+  // is true everywhere and would mount the auth surface — including
+  // `/generate-two-factor-secret`, `/logout-all` and `/auth/tokens` — in apps
+  // currently running with `dashboard` off. Widening an app's public surface on
+  // upgrade is not something a refactor gets to do silently.
+  if (mounts('auth'))
+    await route.register(frameworkPath('defaults/routes/auth.ts'))
+
+  // The rest of dashboard.ts: email subscribe, storefront cart/checkout,
+  // reviews, sitemap, AI, voice, and the admin dashboard's REST surface. Still
+  // one file and still one gate — splitting auth out was the case with a
+  // reporter behind it; marketing.ts / commerce.ts / monitoring.ts remain the
+  // obvious next cuts.
   //
-  // Held in a variable so the specifier resolves at runtime rather than while
-  // transpiling, where an unresolvable literal would fail this module instead
-  // of throwing where it can be caught.
-  const ormRoutesPackage = '@stacksjs/orm/routes'
-  try {
-    await import(ormRoutesPackage)
+  // Apps that need only a slice can also define the routes they want directly
+  // in `routes/api.ts` — first-registration-wins means the user version takes
+  // priority.
+  if (mounts('dashboard')) {
+    await route.register(frameworkPath('defaults/routes/dashboard.ts'))
+    // JSON endpoints for the dev dashboard UI. Kept separate from the view
+    // routes above so the data layer is one obvious file to grep.
+    await route.register(frameworkPath('defaults/routes/dashboard-api.ts'))
+    // The dev dashboard boots through this file rather than the application
+    // router's importRoutes() path, so load model-declared useApi routes here too.
+    //
+    // Package first, vendored second, matching importRoutes() and start.ts. This
+    // line used to import the vendored copy only, and nothing re-vendors that
+    // file: `@stacksjs/orm` publishes `dist/routes.js` and no `routes.ts`, so an
+    // app kept whatever generator its copy froze at however often it upgraded.
+    // An old enough copy compares route paths literally, so a generated
+    // `PATCH /api/sites/{id}` does not recognise a hand-written
+    // `/api/sites/{siteId}` as the same endpoint and registers alongside it,
+    // and the hand-written handler's authorization check stops running
+    // (stacksjs/stacks#2364).
+    //
+    // Held in a variable so the specifier resolves at runtime rather than while
+    // transpiling, where an unresolvable literal would fail this module instead
+    // of throwing where it can be caught.
+    const ormRoutesPackage = '@stacksjs/orm/routes'
+    try {
+      await import(ormRoutesPackage)
+    }
+    catch {
+      await import(frameworkPath('orm/routes.ts'))
+    }
   }
-  catch {
-    await import(frameworkPath('orm/routes.ts'))
+
+  // Email webhook + unsubscribe routes (stacksjs/stacks#1881, #1880).
+  // Always mounted when the `email` feature is on — the underlying
+  // handlers self-disable when their provider credentials aren't
+  // configured (they 401 rather than processing). Apps that need a
+  // non-default mount path register their own routes in `routes/api.ts`
+  // and the framework's mount silently no-ops since user routes
+  // register first.
+  if (mounts('email')) {
+    await route.register(frameworkPath('defaults/routes/email.ts'))
   }
-}
 
-// Email webhook + unsubscribe routes (stacksjs/stacks#1881, #1880).
-// Always mounted when the `email` feature is on — the underlying
-// handlers self-disable when their provider credentials aren't
-// configured (they 401 rather than processing). Apps that need a
-// non-default mount path register their own routes in `routes/api.ts`
-// and the framework's mount silently no-ops since user routes
-// register first.
-if (mounts('email')) {
-  await route.register(frameworkPath('defaults/routes/email.ts'))
-}
+  // Form-builder public endpoints (`@stacksjs/forms`). Gated on the `forms`
+  // feature, which defaults OFF - an app opts in with config/forms.ts
+  // (`buddy forms:install`) and only then do the public submit routes exist.
+  if (mounts('forms')) {
+    await route.register(frameworkPath('defaults/routes/forms.ts'))
+  }
 
-// Form-builder public endpoints (`@stacksjs/forms`). Gated on the `forms`
-// feature, which defaults OFF - an app opts in with config/forms.ts
-// (`buddy forms:install`) and only then do the public submit routes exist.
-if (mounts('forms')) {
-  await route.register(frameworkPath('defaults/routes/forms.ts'))
-}
+  // Courier delivery endpoints: position ingest and the stop/route lifecycle a
+  // courier's device drives. Gated with the rest of the commerce surface, since
+  // they are meaningless without the delivery models behind them.
+  if (mounts('delivery')) {
+    await route.register(frameworkPath('defaults/routes/delivery.ts'))
+  }
 
-// Courier delivery endpoints: position ingest and the stop/route lifecycle a
-// courier's device drives. Gated with the rest of the commerce surface, since
-// they are meaningless without the delivery models behind them.
-if (mounts('delivery')) {
-  await route.register(frameworkPath('defaults/routes/delivery.ts'))
-}
+  // The payment provider's webhook, which applies payments and refunds to
+  // orders. Gated with the commerce surface; it answers 401 until the driver's
+  // webhook secret is configured.
+  if (mounts('payments')) {
+    await route.register(frameworkPath('defaults/routes/payments.ts'))
+  }
 
-// The payment provider's webhook, which applies payments and refunds to
-// orders. Gated with the commerce surface; it answers 401 until the driver's
-// webhook secret is configured.
-if (mounts('payments')) {
-  await route.register(frameworkPath('defaults/routes/payments.ts'))
-}
+  // The page a Paddle payment link opens: Paddle has no hosted checkout, so
+  // its default payment link has to point at a page of the app's that loads
+  // Paddle.js. Mounted while the app pays through Paddle, as part of the
+  // `payments` bundle when the app names its bundles.
+  const paymentDriverName = (config as { payment?: { driver?: string } }).payment?.driver
+  if (paymentDriverName === 'paddle' && (selection?.explicit ? selection.bundles.has('payments') : true)) {
+    await route.register(frameworkPath('defaults/routes/paddle.ts'))
+  }
 
-// The page a Paddle payment link opens: Paddle has no hosted checkout, so
-// its default payment link has to point at a page of the app's that loads
-// Paddle.js. Mounted while the app pays through Paddle, as part of the
-// `payments` bundle when the app names its bundles.
-const paymentDriverName = (config as { payment?: { driver?: string } }).payment?.driver
-if (paymentDriverName === 'paddle' && (selection?.explicit ? selection.bundles.has('payments') : true)) {
-  await route.register(frameworkPath('defaults/routes/paddle.ts'))
+  // Social sign-in: `/auth/{provider}` + `/auth/{provider}/callback`
+  // (stacksjs/stacks#2276). An opt-in bundle, NOT part of the implicit default
+  // set or `all` — OAuth callback URLs in an app that configured no provider
+  // are surface for nothing. So `mounts()` does not apply here: an app that
+  // NAMED its bundles decides outright (`social` listed → on, absent → off),
+  // and an app that said nothing gets it exactly when a provider is actually
+  // configured in config/services.ts — configuring GitHub and finding
+  // /auth/github dead would be the puzzle, not the mount.
+  const { configuredSocialProviders } = await import('@stacksjs/socials')
+  const mountSocial = selection?.explicit
+    ? selection.bundles.has('social')
+    : configuredSocialProviders().length > 0
+  if (mountSocial) {
+    await route.register(frameworkPath('defaults/routes/socials.ts'))
+  }
 }
 
-// Social sign-in: `/auth/{provider}` + `/auth/{provider}/callback`
-// (stacksjs/stacks#2276). An opt-in bundle, NOT part of the implicit default
-// set or `all` — OAuth callback URLs in an app that configured no provider
-// are surface for nothing. So `mounts()` does not apply here: an app that
-// NAMED its bundles decides outright (`social` listed → on, absent → off),
-// and an app that said nothing gets it exactly when a provider is actually
-// configured in config/services.ts — configuring GitHub and finding
-// /auth/github dead would be the puzzle, not the mount.
-const { configuredSocialProviders } = await import('@stacksjs/socials')
-const mountSocial = selection?.explicit
-  ? selection.bundles.has('social')
-  : configuredSocialProviders().length > 0
-if (mountSocial) {
-  await route.register(frameworkPath('defaults/routes/socials.ts'))
+// Register the bundles, withholding any route whose framework action depends
+// on a model this app excluded from its schema and whose table its database
+// does not have. Those routes could only answer 500 (stacksjs/stacks#2943); now
+// they are absent, and boot says which and why. When the table list cannot be
+// read, nothing is withheld.
+const { frameworkRouteAdmission } = await import('@stacksjs/database')
+const withheld = await withRouteAdmission(await frameworkRouteAdmission(), registerDefaultBundles)
+if (withheld.length > 0) {
+  const shown = withheld.slice(0, 5).map(r => `${r.method} ${r.path} -> ${r.handler} needs ${r.reason}`)
+  const more = withheld.length > shown.length ? `\n  ... and ${withheld.length - shown.length} more` : ''
+  log.warn(`[Routes] Not registering ${withheld.length} framework route(s) whose models are not in this app's schema (database.models.includeFrameworkDefaults is false) and whose tables do not exist:\n  ${shown.join('\n  ')}${more}\nPublish a model with \`buddy publish model <Name>\` or set includeFrameworkDefaults to serve them.`)
 }

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.262",
+  "version": "0.75.264",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.262",
+  "version": "0.75.264",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.262",
-    "@stacksjs/sanitizer": "0.2.661",
-    "@stacksjs/stx": "0.2.661",
+    "@stacksjs/mobile": "0.75.264",
+    "@stacksjs/sanitizer": "0.2.663",
+    "@stacksjs/stx": "0.2.663",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

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>