@stacksjs/defaults 0.75.279 → 0.75.281

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

@@ -1,94 +1,123 @@
+@import('../UI/Table')
+
 <script client>
 import type { ReviewRecord } from '../../../../app/Actions/Dashboard/Commerce/review-records'
+import { parseDashboardDate } from '../../../../functions/dashboard-dates'
 
 const reviews = useReactiveProp('reviews', [] as ReviewRecord[])
 const loading = useReactiveProp('loading', false)
 const busyId = useReactiveProp('busyId', '')
+/** The parent's sort select: a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
+/** Epoch seconds or milliseconds as well as stored timestamps, as the API sends either. */
 function formatDate(value: string): string {
   if (!value)
     return 'Not recorded'
-  const numeric = /^\d{10,13}$/.test(value)
-    ? Number(value) * (value.length === 10 ? 1000 : 1)
-    : Number.NaN
-  const normalized = /^\d{4}-\d{2}-\d{2} \d/.test(value)
-    ? `${value.replace(' ', 'T')}Z`
-    : value
-  const date = new Date(Number.isFinite(numeric) ? numeric : normalized)
+  const date = /^\d{10,13}$/.test(value)
+    ? new Date(Number(value) * (value.length === 10 ? 1000 : 1))
+    : parseDashboardDate(value)
   return Number.isNaN(date.getTime())
     ? value
     : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
 }
+
+/**
+ * Customer and review are slotted: the verified badge, the stars and the
+ * vote counts are layout a column option cannot express. Approve and feature
+ * each have two declared actions, one per state, so a row offers the one
+ * that applies.
+ */
+const COLUMNS = [
+  { key: 'customerLabel', label: 'Customer', sortable: true, slotted: true },
+  { key: 'productLabel', label: 'Product', sortable: true, class: 'text-gray-700 dark:text-neutral-200' },
+  { key: 'rating', label: 'Review', sortable: true, slotted: true },
+  {
+    key: 'moderation',
+    label: 'State',
+    type: 'badge' as const,
+    sortable: true,
+    subtitleKey: 'featuredLabel',
+    badgeClasses: {
+      approved: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30',
+      pending: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30',
+    },
+    badgeLabels: { approved: 'Approved', pending: 'Pending' },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'approve', label: 'Approve review', icon: 'i-hugeicons-checkmark-circle-02', class: 'text-green-500', when: { key: 'approved', equals: false } },
+  { action: 'approve', label: 'Return review to pending', icon: 'i-hugeicons-cancel-circle', class: 'text-green-500', when: { key: 'approved', equals: true } },
+  { action: 'feature', label: 'Feature review', icon: 'i-hugeicons-star', class: 'text-amber-500', when: { key: 'featured', equals: false } },
+  { action: 'feature', label: 'Remove review from featured', icon: 'i-hugeicons-star-off', class: 'text-amber-500', when: { key: 'featured', equals: true } },
+  { action: 'edit', label: 'Edit review', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete review', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
+
+const rows = derived(() => reviews().map(review => ({
+  ...review,
+  customerLabel: review.customerName || 'Guest customer',
+  productLabel: review.productName || 'Unlinked product',
+  titleLabel: review.title || 'Untitled review',
+  contentLabel: review.content || 'No review content recorded.',
+  stars: `${'★'.repeat(review.rating)}${'☆'.repeat(5 - review.rating)}`,
+  starsLabel: `${review.rating} out of 5 stars`,
+  helpfulLabel: `${review.helpfulVotes} helpful`,
+  unhelpfulLabel: `${review.unhelpfulVotes} not helpful`,
+  dateLabel: formatDate(review.createdAt),
+  moderation: review.approved ? 'approved' : 'pending',
+  featuredLabel: review.featured ? 'Featured' : '',
+})))
+
+function handleRowAction(payload: { action: string, row: ReviewRecord }): 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() && reviews().length === 0" class="flex items-center justify-center p-10 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 review records
-  </div>
-  <div :else-if="reviews().length === 0" class="p-10 text-center">
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No reviews found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the current filters or wait for a customer review.</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 uppercase dark:text-neutral-400">Customer</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Product</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Review</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">State</th>
-          <th scope="col" class="relative px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-        <template :for="review in reviews()" :key="review.id">
-          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/40 align-top">
-            <td class="px-4 py-4 min-w-44">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ review.customerName || 'Guest customer' }}</p>
-              <p :if="review.customerEmail" class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ review.customerEmail }}</p>
-              <span :if="review.verifiedPurchase" class="inline-flex items-center mt-2 font-medium text-green-700 text-xs dark:text-green-300">
-                <span class="mr-1 h-3.5 w-3.5 i-hugeicons-checkmark-badge-01"></span>
-                Verified purchase
-              </span>
-            </td>
-            <td class="px-4 py-4 min-w-40 text-gray-700 text-sm dark:text-neutral-200">{{ review.productName || 'Unlinked product' }}</td>
-            <td class="px-4 py-4 max-w-lg min-w-72">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ review.title || 'Untitled review' }}</p>
-              <p class="mt-1 line-clamp-2 text-gray-500 text-sm dark:text-neutral-400">{{ review.content || 'No review content recorded.' }}</p>
-              <div class="flex flex-wrap gap-x-3 gap-y-1 items-center mt-2 text-gray-400 text-xs dark:text-neutral-500">
-                <span :aria-label="review.rating + ' out of 5 stars'" class="text-amber-500 text-sm">{{ '★'.repeat(review.rating) }}{{ '☆'.repeat(5 - review.rating) }}</span>
-                <span>{{ review.helpfulVotes }} helpful</span>
-                <span>{{ review.unhelpfulVotes }} not helpful</span>
-                <span>{{ formatDate(review.createdAt) }}</span>
-              </div>
-            </td>
-            <td class="px-4 py-4 whitespace-nowrap">
-              <span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (review.approved ? 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30' : 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30')">
-                {{ review.approved ? 'Approved' : 'Pending' }}
-              </span>
-              <span :if="review.featured" class="block mt-2 font-medium text-blue-700 text-xs dark:text-blue-300">Featured</span>
-            </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <div class="flex gap-1 justify-end">
-                <Button variant="ghost" size="sm" iconOnly :disabled="busyId() === review.id" :ariaLabel="review.approved ? 'Return review to pending' : 'Approve review'" @click="emit('approve', review)">
-                  <span :class="'block h-4 w-4 text-green-500 ' + (review.approved ? 'i-hugeicons-cancel-circle' : 'i-hugeicons-checkmark-circle-02')"></span>
-                </Button>
-                <Button variant="ghost" size="sm" iconOnly :disabled="busyId() === review.id" :ariaLabel="review.featured ? 'Remove review from featured' : 'Feature review'" @click="emit('feature', review)">
-                  <span :class="'block h-4 w-4 text-amber-500 ' + (review.featured ? 'i-hugeicons-star-off' : 'i-hugeicons-star')"></span>
-                </Button>
-                <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit review ' + review.id" @click="emit('edit', review)">
-                  <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-                </Button>
-                <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete review ' + review.id" @click="emit('delete', review)">
-                  <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-                </Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  No `searchable` or `filterable`: the parent dashboard owns the search box
+  and the filter selects. Table pages the whole filtered list the parent passes.
+--}}
+<Table
+  :sort-reset-key="sortResetKey()"
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="id"
+  busy-key="id"
+  :busy-value="busyId()"
+  paginated
+  :page-size="12"
+  empty-title="No reviews found"
+  empty-description="Adjust the current filters or wait for a customer review."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <template :if="column.key === 'customerLabel'">
+      <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.customerLabel"></p>
+      <p :if="row.customerEmail" class="mt-1 text-gray-500 text-xs dark:text-neutral-400" x-text="row.customerEmail"></p>
+      <span :if="row.verifiedPurchase" class="inline-flex items-center mt-2 font-medium text-green-700 text-xs dark:text-green-300">
+        <span class="mr-1 h-3.5 w-3.5 i-hugeicons-checkmark-badge-01"></span>
+        Verified purchase
+      </span>
+    </template>
+    <template :if="column.key === 'rating'">
+      <div class="max-w-lg min-w-72">
+        <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.titleLabel"></p>
+        <p class="mt-1 line-clamp-2 text-gray-500 text-sm dark:text-neutral-400" x-text="row.contentLabel"></p>
+        <div class="flex flex-wrap gap-x-3 gap-y-1 items-center mt-2 text-gray-400 text-xs dark:text-neutral-500">
+          <span :aria-label="row.starsLabel" class="text-amber-500 text-sm" x-text="row.stars"></span>
+          <span x-text="row.helpfulLabel"></span>
+          <span x-text="row.unhelpfulLabel"></span>
+          <span x-text="row.dateLabel"></span>
+        </div>
+      </div>
+    </template>
+  </template>
+</Table>

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

@@ -268,7 +268,7 @@ onMount(() => {
       </label>
     </div>
 
-    <CommerceTaxesTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
+    <CommerceTaxesTable :sort-reset-key="sort()" :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -5,6 +5,8 @@ import type { TaxRateRecord } from '../../../../app/Actions/Dashboard/Commerce/t
 
 const records = useReactiveProp('records', [] as TaxRateRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select; a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
 const emit = defineEmits()
 
 /**
@@ -50,6 +52,7 @@ function handleRowAction(payload: { action: string, row: TaxRateRecord }): void
   and the filter selects. Paging is what was missing, and Table brings it.
 --}}
 <Table
+  :sort-reset-key="sortResetKey()"
   :columns="COLUMNS"
   :data="rows()"
   :loading="loading()"

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

@@ -265,7 +265,7 @@ onMount(() => {
       </label>
     </div>
 
-    <CommerceUnitsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
+    <CommerceUnitsTable :sort-reset-key="sort()" :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -5,6 +5,8 @@ import type { ProductUnitRecord } from '../../../../app/Actions/Dashboard/Commer
 
 const records = useReactiveProp('records', [] as ProductUnitRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select; a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
 const emit = defineEmits()
 
 /**
@@ -56,6 +58,7 @@ function handleRowAction(payload: { action: string, row: ProductUnitRecord }): v
   duplicate them. Paging is what was missing, and Table brings it.
 --}}
 <Table
+  :sort-reset-key="sortResetKey()"
   :columns="COLUMNS"
   :data="rows()"
   :loading="loading()"

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

@@ -226,7 +226,7 @@ onMount(() => {
       <label class="flex gap-2 items-center text-gray-500 text-sm dark:text-neutral-400">Sort<select x-model="sort" class="px-3 py-1.5 text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="variant">Name</option><option value="options">Most options</option><option value="product">Product</option><option value="newest">Newest</option></select></label>
     </div>
 
-    <CommerceVariantsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
+    <CommerceVariantsTable :sort-reset-key="sort()" :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -5,6 +5,8 @@ import type { ProductVariantRecord } from '../../../../app/Actions/Dashboard/Com
 
 const records = useReactiveProp('records', [] as ProductVariantRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select; a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
 const emit = defineEmits()
 
 /**
@@ -48,6 +50,7 @@ function handleRowAction(payload: { action: string, row: ProductVariantRecord })
 </script>
 
 <Table
+  :sort-reset-key="sortResetKey()"
   :columns="COLUMNS"
   :data="rows()"
   :loading="loading()"

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

@@ -52,8 +52,6 @@ const {
   loading,
   loadError,
   search,
-  page,
-  perPage,
   editorOpen,
   editorMode,
   editing,
@@ -63,8 +61,6 @@ const {
   deleteBusy,
   deleteError,
   filteredRecords,
-  paginatedRecords,
-  goToPage,
   handleSearch,
   openCreate,
   openEdit,
@@ -73,7 +69,6 @@ const {
   closeDelete,
   upsert,
   remove,
-  clampPage,
 } = useRecordsDashboard<CourierRecord>({ filter: matchesQuery })
 
 const users = state<UserOption[]>([])
@@ -114,7 +109,6 @@ async function loadCouriers(): Promise<void> {
       throw new TypeError('Courier resources were not returned in the expected shape.')
     users.set(userData.users)
     records.set(courierData.map(withUser))
-    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -203,11 +197,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Courier roster</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search couriers" 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 couriers</div>
-    <CouriersTable :if="!loading()" :couriers="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>
+    <CouriersTable :couriers="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>
 

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

@@ -1,3 +1,5 @@
+@import('../../UI/Table')
+
 <script client>
 type CourierStatus = 'active' | 'on_delivery' | 'on_break'
 
@@ -13,91 +15,62 @@ interface CourierRow {
 }
 
 const couriers = useReactiveProp('couriers', [] as CourierRow[])
+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 statusLabel(status: CourierStatus): string {
-  return {
-    active: 'Available',
-    on_delivery: 'On delivery',
-    on_break: 'On break',
-  }[status] || status
-}
+const COLUMNS = [
+  { key: 'name', label: 'Courier', sortable: true, class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'phone', label: 'Phone', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'vehicle_number', label: 'Vehicle', sortable: true, class: 'font-mono whitespace-nowrap' },
+  { key: 'license', label: 'License', sortable: true, class: 'font-mono whitespace-nowrap' },
+  { key: 'userLabel', label: 'User', sortable: true, 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',
+      on_delivery: 'bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+      on_break: 'bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300',
+    },
+    badgeLabels: { active: 'Available', on_delivery: 'On delivery', on_break: 'On break' },
+  },
+]
+
+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 statusClass(status: CourierStatus): 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 === 'on_delivery')
-    return 'bg-blue-50 text-blue-700 ring-blue-600/20 dark:bg-blue-900/30 dark:text-blue-300'
-  return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-900/30 dark:text-amber-300'
+const rows = derived(() => couriers().map(courier => ({
+  ...courier,
+  userLabel: courier.user?.name || (courier.user_id ? `User #${courier.user_id}` : 'Not linked'),
+  actionName: `courier ${courier.name}, record ${courier.id}`,
+})))
+
+function handleRowAction(payload: { action: string, row: CourierRow }): 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">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">Phone</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">License</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">User</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="courier in couriers" :key="courier.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">
-            {{ courier.name }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ courier.phone }}
-          </td>
-          <td class="px-4 py-3.5 font-mono text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ courier.vehicle_number }}
-          </td>
-          <td class="px-4 py-3.5 font-mono text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ courier.license }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ courier.user?.name || (courier.user_id ? 'User #' + courier.user_id : 'Not linked') }}
-          </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(courier.status)">
-              {{ statusLabel(courier.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', courier)"
-              :ariaLabel="'Edit courier ' + courier.name + ', record ' + courier.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', courier)"
-              :ariaLabel="'Delete courier ' + courier.name + ', record ' + courier.id"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="couriers().length === 0">
-        <td colspan="7" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No couriers 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 couriers found"
+  empty-description="Add a courier, or adjust the search."
+  @row-action="handleRowAction"
+/>

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

@@ -49,8 +49,6 @@ const {
   loading,
   loadError,
   search,
-  page,
-  perPage,
   editorOpen,
   editorMode,
   editing,
@@ -60,8 +58,6 @@ const {
   deleteBusy,
   deleteError,
   filteredRecords,
-  paginatedRecords,
-  goToPage,
   handleSearch,
   openCreate,
   openEdit,
@@ -70,7 +66,6 @@ const {
   closeDelete,
   upsert,
   remove,
-  clampPage,
 } = useRecordsDashboard<DeliveryRouteRecord>({ filter: matchesQuery })
 
 const couriers = state<CourierRecord[]>([])
@@ -117,7 +112,6 @@ async function loadRoutes(): Promise<void> {
       throw new TypeError('Delivery route resources were not returned in the expected shape.')
     couriers.set(courierData)
     records.set(routeData.map(withCourier))
-    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -172,7 +166,6 @@ async function confirmDelete(): Promise<void> {
     })
     remove(current)
     deleting.set(null)
-    clampPage()
     pushToast('success', 'Delivery route deleted', { detail: `Route #${current.id}` })
   }
   catch (error) {
@@ -208,11 +201,7 @@ onMount(() => {
       <div><h2 class="font-semibold text-gray-900 dark:text-white">Route plan</h2><p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ filteredRecords().length }} matching records</p></div>
       <SearchFilter placeholder="Search delivery routes" 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 delivery routes</div>
-    <DeliveryRoutesTable :if="!loading()" :routes="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>
+    <DeliveryRoutesTable :routes="filteredRecords()" :loading="loading()" :page-reset-key="search()" @edit="openEdit" @delete="requestDelete" />
   </section>
 </div>