@stacksjs/defaults 0.75.279 → 0.75.281

package/resources/components/Dashboard/Commerce/Delivery/DeliveryRoutesTable.stx

@@ -1,3 +1,5 @@
+@import('../../UI/Table')
+
 <script client>
 interface DeliveryRouteRow {
   id: number
@@ -12,97 +14,66 @@ interface DeliveryRouteRow {
 }
 
 const routes = useReactiveProp('routes', [] as DeliveryRouteRow[])
+const loading = useReactiveProp('loading', false)
+/** The parent's search: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-function formatDateTime(value: string): string {
-  if (!value)
-    return 'Not recorded'
+function formatNumber(value: number): string {
+  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value)
+}
 
-  const normalized = value.includes('T') ? value : value.replace(' ', 'T')
-  const date = new Date(normalized)
-  if (Number.isNaN(date.getTime()))
-    return value
+/** Time and distance carry their units, so they read as text and sort by the number. */
+const COLUMNS = [
+  { key: 'routeLabel', label: 'Route', sortable: true, class: 'font-medium tabular-nums text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'courierLabel', label: 'Courier', sortable: true, subtitleKey: 'courierNote', class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'vehicle', label: 'Vehicle', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'stops', label: 'Stops', type: 'number' as const, sortable: true, class: 'tabular-nums' },
+  { key: 'delivery_time', label: 'Delivery time', sortable: true, slotted: true },
+  { key: 'total_distance', label: 'Distance', sortable: true, slotted: true },
+  { key: 'last_active', label: 'Last active', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
 
-  return new Intl.DateTimeFormat('en-US', {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(date)
-}
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
 
-function formatNumber(value: number): string {
-  return new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(value)
+const rows = derived(() => routes().map(route => ({
+  ...route,
+  routeLabel: `#${route.id}`,
+  courierLabel: route.courier_record?.name || route.courier,
+  courierNote: route.courier_id ? `Linked courier #${route.courier_id}` : 'Legacy snapshot',
+  timeLabel: `${formatNumber(route.delivery_time)} min`,
+  distanceLabel: `${formatNumber(route.total_distance)} mi`,
+  actionName: `delivery route ${route.id} for ${route.courier}`,
+})))
+
+function handleRowAction(payload: { action: string, row: DeliveryRouteRow }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-    <thead class="bg-stone-50/80 dark:bg-neutral-800">
-      <tr>
-        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Route</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Courier</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Vehicle</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Stops</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Time</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Distance</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Last Active</th>
-        <th scope="col" class="relative pl-3 pr-6 py-3.5">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-      <template :for="route in routes" :key="route.id">
-        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-          <td class="pl-6 pr-3 py-3.5 font-medium tabular-nums text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            #{{ route.id }}
-          </td>
-          <td class="px-4 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            <span class="block">{{ route.courier_record?.name || route.courier }}</span>
-            <span class="block font-normal text-stone-400 text-xs dark:text-neutral-500">{{ route.courier_id ? 'Linked courier #' + route.courier_id : 'Legacy snapshot' }}</span>
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ route.vehicle }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ route.stops }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatNumber(route.delivery_time) }} min
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatNumber(route.total_distance) }} mi
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatDateTime(route.last_active) }}
-          </td>
-          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('edit', route)"
-              :ariaLabel="'Edit delivery route ' + route.id + ' for ' + route.courier"
-            >
-              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('delete', route)"
-              :ariaLabel="'Delete delivery route ' + route.id + ' for ' + route.courier"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="routes().length === 0">
-        <td colspan="8" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No delivery routes found.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box.
+  Table pages the whole filtered list the parent passes, and stays mounted
+  while it loads.
+--}}
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="actionName"
+  paginated
+  :page-size="10"
+  empty-title="No delivery routes found"
+  empty-description="Add a route, or adjust the search."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <span :if="column.key === 'delivery_time'" class="tabular-nums whitespace-nowrap" x-text="row.timeLabel"></span>
+    <span :if="column.key === 'total_distance'" class="tabular-nums whitespace-nowrap" x-text="row.distanceLabel"></span>
+  </template>
+</Table>

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveriesDashboard.stx

@@ -29,8 +29,6 @@ const records = state<DigitalDeliveryRecord[]>([])
 const loading = state(true)
 const loadError = state('')
 const search = state('')
-const page = state(1)
-const perPage = state(10)
 const editorOpen = state(false)
 const editorMode = state<'create' | 'edit'>('create')
 const editing = state<DigitalDeliveryRecord | null>(null)
@@ -53,11 +51,6 @@ function filteredRecords(): DigitalDeliveryRecord[] {
   ].some(value => String(value).toLowerCase().includes(query)))
 }
 
-function paginatedRecords(): DigitalDeliveryRecord[] {
-  const start = (page() - 1) * perPage()
-  return filteredRecords().slice(start, start + perPage())
-}
-
 function metricCards(): Array<{ label: string, value: string, detail: string }> {
   return [
     { label: 'Methods', value: records().length.toLocaleString(), detail: 'Persisted digital delivery records' },
@@ -75,9 +68,6 @@ async function loadMethods(): Promise<void> {
     if (!Array.isArray(data))
       throw new TypeError('Digital delivery records were not returned in the expected shape.')
     records.set(data)
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -90,7 +80,6 @@ async function loadMethods(): Promise<void> {
 
 function handleSearch(value: string): void {
   search.set(value)
-  page.set(1)
 }
 
 function openCreate(): void {
@@ -139,7 +128,6 @@ async function saveMethod(payload: DigitalDeliveryPayload): Promise<void> {
     else {
       const nextRecords = [...records(), updated]
       records.set(nextRecords)
-      page.set(Math.max(1, Math.ceil(nextRecords.length / perPage())))
     }
     editorOpen.set(false)
     editing.set(null)
@@ -177,9 +165,6 @@ async function confirmDelete(): Promise<void> {
     })
     records.set(records().filter(record => record.id !== current.id))
     deleting.set(null)
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
     pushToast('success', 'Digital delivery deleted', { detail: current.name })
   }
   catch (error) {
@@ -190,10 +175,6 @@ async function confirmDelete(): Promise<void> {
   }
 }
 
-function goToPage(value: number): void {
-  page.set(value)
-}
-
 onMount(() => {
   void loadMethods()
 })
@@ -218,11 +199,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Delivery methods</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search digital delivery" class="w-full sm:w-80" @search="handleSearch" />
     </div>
-    <div :if="loading()" class="flex items-center justify-center py-24 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading digital delivery</div>
-    <DigitalDeliveryTable :if="!loading()" :methods="paginatedRecords()" @edit="openEdit" @delete="requestDelete" />
-    <div :if="!loading()" class="px-4 py-3 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <DeliveryPagination :current-page="page()" :total-items="filteredRecords().length" :items-per-page="perPage()" @select="goToPage" />
-    </div>
+    <DigitalDeliveryTable :methods="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>
 

package/resources/components/Dashboard/Commerce/Delivery/DigitalDeliveryTable.stx

@@ -1,3 +1,5 @@
+@import('../../UI/Table')
+
 <script client>
 type DigitalDeliveryStatus = 'active' | 'inactive'
 
@@ -13,89 +15,69 @@ interface DigitalDeliveryRow {
 }
 
 const methods = useReactiveProp('methods', [] as DigitalDeliveryRow[])
+const loading = useReactiveProp('loading', false)
+/** The parent's search: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-function statusClass(status: DigitalDeliveryStatus): string {
-  return status === 'active'
-    ? 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-300'
-    : 'bg-stone-100 text-stone-600 ring-stone-500/20 dark:bg-neutral-700 dark:text-neutral-300'
-}
+/** Expiry keeps its unit and sorts by the number of days. */
+const COLUMNS = [
+  { key: 'name', label: 'Method', sortable: true, class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'description', label: 'Description', class: 'max-w-xs truncate' },
+  { key: 'download_limit', label: 'Downloads', type: 'number' as const, sortable: true, emptyText: 'Unlimited' },
+  { key: 'expiry_days', label: 'Expiry', sortable: true, slotted: true },
+  { key: 'requiresLogin', label: 'Login', type: 'boolean' as const, sortable: true },
+  { key: 'automatic', label: 'Automatic', type: 'boolean' as const, sortable: true },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+      inactive: 'bg-stone-100 text-stone-600 dark:bg-neutral-700 dark:text-neutral-300',
+    },
+    badgeLabels: { active: 'Active', inactive: 'Inactive' },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
 
-function yesNo(value: boolean | number): string {
-  return Boolean(value) ? 'Yes' : 'No'
+const rows = derived(() => methods().map(method => ({
+  ...method,
+  expiryLabel: `${method.expiry_days} days`,
+  requiresLogin: Boolean(method.requires_login),
+  automatic: Boolean(method.automatic_delivery),
+  actionName: `digital delivery method ${method.name}, record ${method.id}`,
+})))
+
+function handleRowAction(payload: { action: string, row: DigitalDeliveryRow }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-    <thead class="bg-stone-50/80 dark:bg-neutral-800">
-      <tr>
-        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Method</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Description</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Downloads</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Expiry</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Login</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Automatic</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-        <th scope="col" class="relative pl-3 pr-6 py-3.5">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-      <template :for="method in methods" :key="method.id">
-        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-          <td class="pl-6 pr-3 py-3.5 font-medium text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            {{ method.name }}
-          </td>
-          <td class="px-4 py-3.5 max-w-72 text-sm text-stone-500 dark:text-neutral-300">
-            <span class="block truncate" :title="method.description">{{ method.description }}</span>
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ method.download_limit ?? 'Unlimited' }}
-          </td>
-          <td class="px-4 py-3.5 tabular-nums text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ method.expiry_days }} days
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ yesNo(method.requires_login) }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ yesNo(method.automatic_delivery) }}
-          </td>
-          <td class="px-4 py-3.5 text-sm whitespace-nowrap">
-            <span :class="'inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md ' + statusClass(method.status)">
-              {{ method.status === 'active' ? 'Active' : 'Inactive' }}
-            </span>
-          </td>
-          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('edit', method)"
-              :ariaLabel="'Edit digital delivery method ' + method.name + ', record ' + method.id"
-            >
-              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('delete', method)"
-              :ariaLabel="'Delete digital delivery method ' + method.name + ', record ' + method.id"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="methods().length === 0">
-        <td colspan="8" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No digital delivery methods found.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box.
+  Table pages the whole filtered list the parent passes, and stays mounted
+  while it loads.
+--}}
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="actionName"
+  paginated
+  :page-size="10"
+  empty-title="No digital delivery methods found"
+  empty-description="Add a method, or adjust the search."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <span class="whitespace-nowrap" x-text="row.expiryLabel"></span>
+  </template>
+</Table>

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeysDashboard.stx

@@ -60,8 +60,6 @@ const {
   loading,
   loadError,
   search,
-  page,
-  perPage,
   editorOpen,
   editorMode,
   editing,
@@ -71,8 +69,6 @@ const {
   deleteBusy,
   deleteError,
   filteredRecords,
-  paginatedRecords,
-  goToPage,
   handleSearch,
   openCreate,
   openEdit,
@@ -81,7 +77,6 @@ const {
   closeDelete,
   upsert,
   remove,
-  clampPage,
 } = useRecordsDashboard<LicenseKeyRecord>({ filter: matchesQuery })
 
 const options = state<LicenseKeyOptions>(emptyOptions)
@@ -132,7 +127,6 @@ async function loadKeys(): Promise<void> {
       throw new TypeError('License key resources were not returned in the expected shape.')
     options.set(optionData)
     records.set(keyData.map(withRelationships))
-    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -187,7 +181,6 @@ async function confirmDelete(): Promise<void> {
     })
     remove(current)
     deleting.set(null)
-    clampPage()
     pushToast('success', 'License key deleted', { detail: current.key })
   }
   catch (error) {
@@ -222,11 +215,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Key inventory</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search license keys" class="w-full sm:w-80" @search="handleSearch" />
     </div>
-    <div :if="loading()" class="flex items-center justify-center py-24 text-gray-500 text-sm dark:text-neutral-400"><span class="mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading license keys</div>
-    <LicenseKeysTable :if="!loading()" :license-keys="paginatedRecords()" @edit="openEdit" @delete="requestDelete" />
-    <div :if="!loading()" class="px-4 py-3 bg-gray-50 dark:bg-neutral-900/50 border-gray-200 border-t dark:border-neutral-700">
-      <DeliveryPagination :current-page="page()" :total-items="filteredRecords().length" :items-per-page="perPage()" @select="goToPage" />
-    </div>
+    <LicenseKeysTable :license-keys="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>
 

package/resources/components/Dashboard/Commerce/Delivery/LicenseKeysTable.stx

@@ -1,3 +1,5 @@
+@import('../../UI/Table')
+
 <script client>
 type LicenseKeyStatus = 'active' | 'inactive' | 'unassigned'
 
@@ -23,110 +25,67 @@ interface LicenseKeyRow {
 }
 
 const licenseKeys = useReactiveProp('license-keys', [] as LicenseKeyRow[])
+const loading = useReactiveProp('loading', false)
+/** The parent's search: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not set'
+const COLUMNS = [
+  { key: 'key', label: 'Key', sortable: true, class: 'font-medium font-mono text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'template', label: 'Template', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'customerLabel', label: 'Customer', sortable: true, subtitleKey: 'customerDetail', class: 'whitespace-nowrap' },
+  { key: 'productLabel', label: 'Product', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'orderLabel', label: 'Order', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'created_at', label: 'Created', type: 'date' as const, sortable: true, emptyText: 'Not set', class: 'whitespace-nowrap' },
+  { key: 'expiry_date', label: 'Expires', type: 'date' as const, sortable: true, emptyText: 'Not set', class: 'whitespace-nowrap' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'bg-green-50 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+      inactive: 'bg-stone-100 text-stone-600 dark:bg-neutral-700 dark:text-neutral-300',
+      unassigned: 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+    },
+    badgeLabels: { active: 'Active', inactive: 'Inactive', unassigned: 'Unassigned' },
+  },
+]
 
-  const normalized = value.includes('T') ? value : value.replace(' ', 'T')
-  const date = new Date(normalized)
-  if (Number.isNaN(date.getTime()))
-    return value
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
 
-  return new Intl.DateTimeFormat('en-US', { dateStyle: 'medium' }).format(date)
-}
+const rows = derived(() => licenseKeys().map(licenseKey => ({
+  ...licenseKey,
+  customerLabel: licenseKey.customer?.label || 'Unassigned',
+  customerDetail: licenseKey.customer?.detail || '',
+  productLabel: licenseKey.product?.label || 'Unassigned',
+  orderLabel: licenseKey.order?.label || 'Unassigned',
+  actionName: `license key ${licenseKey.key}, record ${licenseKey.id}`,
+})))
 
-function statusLabel(status: LicenseKeyStatus): string {
-  return status === 'unassigned' ? 'Unassigned' : status === 'active' ? 'Active' : 'Inactive'
-}
-
-function statusClass(status: LicenseKeyStatus): string {
-  if (status === 'active')
-    return 'bg-green-50 text-green-700 ring-green-600/20 dark:bg-green-900/30 dark:text-green-300'
-  if (status === 'inactive')
-    return 'bg-stone-100 text-stone-600 ring-stone-500/20 dark:bg-neutral-700 dark:text-neutral-300'
-  return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300'
+function handleRowAction(payload: { action: string, row: LicenseKeyRow }): void {
+  emit(payload.action, payload.row)
 }
 </script>
 
-<div class="overflow-x-auto border border-stone-200/80 rounded-xl dark:border-neutral-700 shadow-sm">
-  <table class="min-w-full divide-stone-100 divide-y dark:divide-neutral-700">
-    <thead class="bg-stone-50/80 dark:bg-neutral-800">
-      <tr>
-        <th scope="col" class="pl-6 pr-3 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Key</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Template</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Customer</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Product</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Order</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Created</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Expires</th>
-        <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-        <th scope="col" class="relative pl-3 pr-6 py-3.5">
-          <span class="sr-only">Actions</span>
-        </th>
-      </tr>
-    </thead>
-    <tbody class="bg-white dark:bg-neutral-800 divide-stone-100 divide-y dark:divide-neutral-700">
-      <template :for="licenseKey in licenseKeys" :key="licenseKey.id">
-        <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-700/50 transition-colors">
-          <td class="pl-6 pr-3 py-3.5 font-medium font-mono text-sm text-stone-800 whitespace-nowrap dark:text-white">
-            {{ licenseKey.key }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ licenseKey.template }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            <span class="block">{{ licenseKey.customer?.label || 'Unassigned' }}</span>
-            <span :if="licenseKey.customer?.detail" class="block text-stone-400 text-xs dark:text-neutral-500">
-              {{ licenseKey.customer?.detail }}
-            </span>
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ licenseKey.product?.label || 'Unassigned' }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ licenseKey.order?.label || 'Unassigned' }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatDate(licenseKey.created_at) }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ formatDate(licenseKey.expiry_date) }}
-          </td>
-          <td class="px-4 py-3.5 text-sm whitespace-nowrap">
-            <span :class="'inline-flex items-center px-2 py-1 font-medium text-xs ring-1 ring-inset rounded-md ' + statusClass(licenseKey.status)">
-              {{ statusLabel(licenseKey.status) }}
-            </span>
-          </td>
-          <td class="relative pl-3 pr-6 py-3.5 font-medium text-right text-sm whitespace-nowrap">
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('edit', licenseKey)"
-              :ariaLabel="'Edit license key ' + licenseKey.key + ', record ' + licenseKey.id"
-            >
-              <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              iconOnly
-              @click="emit('delete', licenseKey)"
-              :ariaLabel="'Delete license key ' + licenseKey.key + ', record ' + licenseKey.id"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="licenseKeys().length === 0">
-        <td colspan="9" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No license keys found.
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box.
+  Table pages the whole filtered list the parent passes, and stays mounted
+  while it loads.
+--}}
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="actionName"
+  paginated
+  :page-size="10"
+  empty-title="No license keys found"
+  empty-description="Add a license key, or adjust the search."
+  @row-action="handleRowAction"
+/>