@stacksjs/defaults 0.75.279 → 0.75.280

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

@@ -1,3 +1,5 @@
+@import('../../UI/Table')
+
 <script client>
 type SerializedList = string | string[] | null | undefined
 
@@ -13,6 +15,9 @@ interface ShippingZoneRow {
 }
 
 const zones = useReactiveProp('zones', [] as ShippingZoneRow[])
+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 parseList(value: SerializedList): string[] {
@@ -33,119 +38,89 @@ function parseList(value: SerializedList): string[] {
   return []
 }
 
-function visibleItems(value: SerializedList): string[] {
-  return parseList(value).slice(0, 3)
-}
+/** Countries and regions are slotted for their chips: the first three, then a count. */
+const COLUMNS = [
+  { key: 'name', label: 'Zone', sortable: true, class: 'font-medium text-stone-800 whitespace-nowrap dark:text-white' },
+  { key: 'methodLabel', label: 'Method', sortable: true, class: 'whitespace-nowrap' },
+  { key: 'countriesText', label: 'Countries', slotted: true },
+  { key: 'regionsText', label: 'Regions', slotted: true },
+  { key: 'postalLabel', label: 'Postal codes', class: 'max-w-xs truncate' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-400/10 dark:text-emerald-300',
+      draft: 'bg-amber-50 text-amber-700 dark:bg-amber-400/10 dark:text-amber-300',
+    },
+  },
+]
 
-function remainingItems(value: SerializedList): number {
-  return Math.max(0, parseList(value).length - 3)
-}
-
-function formatPostalCodes(value: SerializedList): string {
-  const postalCodes = parseList(value)
-  return postalCodes.length ? postalCodes.join(', ') : 'All postal codes'
-}
+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: string): string {
-  if (status === 'active')
-    return 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-400/20'
-  if (status === 'draft')
-    return 'bg-amber-50 text-amber-700 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-400/20'
-
-  return 'bg-stone-100 text-stone-600 ring-stone-500/20 dark:bg-white/5 dark:text-neutral-300 dark:ring-white/10'
-}
+const rows = derived(() => zones().map((zone) => {
+  const countries = parseList(zone.countries)
+  const regions = parseList(zone.regions)
+  const postal = parseList(zone.postal_codes)
+  return {
+    ...zone,
+    methodLabel: zone.shipping_method?.name || `Method #${zone.shipping_method_id}`,
+    countryChips: countries.slice(0, 3),
+    countriesMore: countries.length > 3 ? `+${countries.length - 3}` : '',
+    countriesText: countries.join(', '),
+    regionChips: regions.slice(0, 3),
+    regionsMore: regions.length > 3 ? `+${regions.length - 3}` : '',
+    regionsText: regions.join(', '),
+    postalLabel: postal.length ? postal.join(', ') : 'All postal codes',
+    actionName: `${zone.name}, record ${zone.id}`,
+  }
+}))
 
-function formatStatus(status: string): string {
-  return status.charAt(0).toUpperCase() + status.slice(1)
+function handleRowAction(payload: { action: string, row: ShippingZoneRow }): 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">Zone Name</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">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">Countries</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">Regions</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">Postal Codes</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="zone in zones" :key="zone.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">
-            {{ zone.name }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 whitespace-nowrap dark:text-neutral-300">
-            {{ zone.shipping_method?.name || 'Method #' + zone.shipping_method_id }}
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 dark:text-neutral-300">
-            <div class="flex flex-wrap gap-1">
-              <template :for="country in visibleItems(zone.countries)">
-                <span class="inline-flex px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-400/10 rounded-full">
-                  {{ country }}
-                </span>
-              </template>
-              <span :if="remainingItems(zone.countries) > 0" class="inline-flex px-2 py-1 font-medium text-stone-600 text-xs dark:text-neutral-300 bg-stone-100 dark:bg-white/5 rounded-full">
-                +{{ remainingItems(zone.countries) }}
-              </span>
-              <span :if="parseList(zone.countries).length === 0">All countries</span>
-            </div>
-          </td>
-          <td class="px-4 py-3.5 text-sm text-stone-500 dark:text-neutral-300">
-            <div class="flex flex-wrap gap-1">
-              <template :for="region in visibleItems(zone.regions)">
-                <span class="inline-flex px-2 py-1 font-medium text-emerald-700 text-xs dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-400/10 rounded-full">
-                  {{ region }}
-                </span>
-              </template>
-              <span :if="remainingItems(zone.regions) > 0" class="inline-flex px-2 py-1 font-medium text-stone-600 text-xs dark:text-neutral-300 bg-stone-100 dark:bg-white/5 rounded-full">
-                +{{ remainingItems(zone.regions) }}
-              </span>
-              <span :if="parseList(zone.regions).length === 0">All regions</span>
-            </div>
-          </td>
-          <td class="px-4 py-3.5 max-w-xs text-sm text-stone-500 truncate dark:text-neutral-300">
-            {{ formatPostalCodes(zone.postal_codes) }}
-          </td>
-          <td class="px-4 py-3.5 text-sm whitespace-nowrap">
-            <span :class="'inline-flex px-2.5 py-1 font-medium text-xs ring-1 ring-inset rounded-full ' + statusClass(zone.status)">
-              {{ formatStatus(zone.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', zone)"
-              :ariaLabel="'Edit ' + zone.name + ', record ' + zone.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', zone)"
-              :ariaLabel="'Delete ' + zone.name + ', record ' + zone.id"
-            >
-              <span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span>
-            </Button>
-          </td>
-        </tr>
-      </template>
-
-      <tr :if="zones().length === 0">
-        <td colspan="7" class="px-6 py-12 text-center text-sm text-stone-500 dark:text-neutral-400">
-          No shipping zones 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 shipping zones found"
+  empty-description="Add a zone, or adjust the search."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <template :if="column.key === 'countriesText'">
+      <div class="flex flex-wrap gap-1">
+        <template :for="country in row.countryChips">
+          <span class="inline-flex px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-400/10 rounded-full" x-text="country"></span>
+        </template>
+        <span :if="row.countriesMore" class="inline-flex px-2 py-1 font-medium text-stone-600 text-xs dark:text-neutral-300 bg-stone-100 dark:bg-white/5 rounded-full" x-text="row.countriesMore"></span>
+        <span :if="row.countryChips.length === 0">All countries</span>
+      </div>
+    </template>
+    <template :if="column.key === 'regionsText'">
+      <div class="flex flex-wrap gap-1">
+        <template :for="region in row.regionChips">
+          <span class="inline-flex px-2 py-1 font-medium text-emerald-700 text-xs dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-400/10 rounded-full" x-text="region"></span>
+        </template>
+        <span :if="row.regionsMore" class="inline-flex px-2 py-1 font-medium text-stone-600 text-xs dark:text-neutral-300 bg-stone-100 dark:bg-white/5 rounded-full" x-text="row.regionsMore"></span>
+        <span :if="row.regionChips.length === 0">All regions</span>
+      </div>
+    </template>
+  </template>
+</Table>

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

@@ -6,7 +6,6 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/print-device-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface PrintDevicesResponse {
   records: PrintDeviceRecord[]
@@ -35,8 +34,6 @@ const search = state('')
 const statusFilter = state('all')
 const locationFilter = state('all')
 const sort = state('name')
-const page = state(1)
-const pageSize = 20
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -76,15 +73,6 @@ function filteredRecords(): PrintDeviceRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): PrintDeviceRecord[] {
-  const selectedPage = Math.min(page(), pageCount())
-  return filteredRecords().slice((selectedPage - 1) * pageSize, selectedPage * pageSize)
-}
-
 function metricCards(): Array<{ label: string, value: string, detail: string }> {
   const current = summary()
   const health = current.total ? Math.round((current.online / current.total) * 100) : 0
@@ -118,13 +106,13 @@ function exportFilename(): string {
   return `print-devices-${new Date().toISOString().slice(0, 10)}.csv`
 }
 
-effect(() => {
-  search()
-  statusFilter()
-  locationFilter()
-  sort()
-  page.set(1)
-})
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+function viewKey(): string {
+  return JSON.stringify([search(), statusFilter(), locationFilter(), sort()])
+}
 
 async function loadPrintDevices(): Promise<void> {
   loading.set(true)
@@ -133,7 +121,6 @@ async function loadPrintDevices(): Promise<void> {
     const data = await dashboardApi<PrintDevicesResponse>('/api/dashboard/commerce/print-devices')
     records.set(Array.isArray(data.records) ? data.records : [])
     summary.set(data.summary ?? { ...emptySummary })
-    page.set(Math.min(page(), Math.max(1, Math.ceil((data.records?.length || 0) / pageSize))))
   }
   catch (error) {
     loadError.set('Print devices could not be loaded.')
@@ -235,8 +222,6 @@ async function deletePrintDevice(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadPrintDevices()
 })
@@ -271,14 +256,9 @@ onMount(() => {
 
     <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
       <p class="text-gray-500 text-sm dark:text-neutral-400">{{ filteredRecords().length }} matching print devices</p>
-      <div class="flex gap-2 items-center">
-        <Button variant="secondary" size="sm" :disabled="page() <= 1" @click="previousPage()">Previous</Button>
-        <span class="text-gray-500 text-sm dark:text-neutral-400">Page {{ Math.min(page(), pageCount()) }} of {{ pageCount() }}</span>
-        <Button variant="secondary" size="sm" :disabled="page() >= pageCount()" @click="nextPage()">Next</Button>
-      </div>
     </div>
 
-    <PrintDevicesTable :records="visibleRecords()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+    <PrintDevicesTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -1,22 +1,16 @@
+@import('../UI/Table')
+
 <script client>
 import type { PrintDeviceRecord } from '../../../../app/Actions/Dashboard/Commerce/print-device-records'
 
 const records = useReactiveProp('records', [] as PrintDeviceRecord[])
 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', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-function statusClass(status: string): string {
-  if (status === 'online')
-    return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300'
-  if (status === 'warning')
-    return 'bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300'
-  return 'bg-red-100 text-red-800 dark:bg-red-950/50 dark:text-red-300'
-}
-
-function statusLabel(status: string): string {
-  return status.charAt(0).toUpperCase() + status.slice(1)
-}
-
 function formatHeartbeat(value: number): string {
   if (!value)
     return 'Not recorded'
@@ -34,50 +28,61 @@ function formatHeartbeat(value: number): string {
     return `${Math.abs(hours)} hr ${hours > 0 ? 'ago' : 'from now'}`
   return new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
 }
+
+/** The heartbeat reads relative to now, so it is text rather than a date column. */
+const COLUMNS = [
+  { key: 'nameLabel', label: 'Printer', sortable: true, subtitleKey: 'macLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'location', label: 'Location', sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+  { key: 'terminal', label: 'Terminal', sortable: true, emptyText: 'Not recorded', class: 'font-mono whitespace-nowrap' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      online: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300',
+      warning: 'bg-amber-100 text-amber-800 dark:bg-amber-950/50 dark:text-amber-300',
+      offline: 'bg-red-100 text-red-800 dark:bg-red-950/50 dark:text-red-300',
+    },
+    badgeLabels: { online: 'Online', warning: 'Warning', offline: 'Offline' },
+  },
+  { key: 'heartbeatLabel', label: 'Last heartbeat', searchable: false, class: 'whitespace-nowrap' },
+  { key: 'printCount', label: 'Prints', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View', icon: 'i-hugeicons-view' },
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  nameLabel: record.name || 'Unnamed printer',
+  macLabel: record.macAddress || 'No MAC address',
+  heartbeatLabel: formatHeartbeat(record.lastPing),
+})))
+
+function handleRowAction(payload: { action: string, row: PrintDeviceRecord }): 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 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 print devices
-  </div>
-  <div :else-if="records().length === 0" class="p-10 text-center">
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No print devices found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a printer or adjust the current filters.</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">Printer</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Location</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Terminal</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Status</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Last heartbeat</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Prints</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="record in records()" :key="record.id">
-          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/40">
-            <td class="px-4 py-4 min-w-56">
-              <Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.name || 'Unnamed printer' }}</Button>
-              <p class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500">{{ record.macAddress || 'No MAC address' }}</p>
-            </td>
-            <td class="px-4 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ record.location || 'Not recorded' }}</td>
-            <td class="px-4 py-4 font-mono text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ record.terminal || 'Not recorded' }}</td>
-            <td class="px-4 py-4 whitespace-nowrap"><span :class="'inline-flex px-2 py-1 font-semibold text-xs rounded-full ' + statusClass(record.status)">{{ statusLabel(record.status) }}</span></td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatHeartbeat(record.lastPing) }}</td>
-            <td class="px-4 py-4 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ record.printCount.toLocaleString() }}</td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'View ' + record.name" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button>
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.name" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span></Button>
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + record.name" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-waste"></span></Button>
-            </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="nameLabel"
+  paginated
+  :page-size="20"
+  empty-title="No print devices found"
+  empty-description="Add a printer or adjust the current filters."
+  @row-action="handleRowAction"
+/>

package/resources/components/Dashboard/Marketing/AbandonedCartsDashboard.stx

@@ -8,7 +8,6 @@ import type {
 import { formatCurrency } from '@stacksjs/commerce/money'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 const emptySummary: AbandonedCartSummary = {
   open: 0,
@@ -39,8 +38,6 @@ const search = state('')
 const stateFilter = state('open')
 const idleFilter = state('all')
 const sort = state('value')
-const page = state(1)
-const perPage = 10
 const dialogOpen = state(false)
 const saving = state(false)
 const saveError = state('')
@@ -73,23 +70,14 @@ function filteredRecords(): AbandonedCartRecord[] {
     })
 }
 
-function visibleRecords(): AbandonedCartRecord[] {
-  const start = (page() - 1) * perPage
-  return filteredRecords().slice(start, start + perPage)
-}
-
-function totalPages(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / perPage))
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+function viewKey(): string {
+  return JSON.stringify([search(), stateFilter(), idleFilter(), sort()])
 }
 
-effect(() => {
-  search()
-  stateFilter()
-  idleFilter()
-  sort()
-  page.set(1)
-})
-
 /** Cart totals and campaign thresholds are integer minor units (stacksjs/stacks#2851). */
 function money(value: number): string {
   return formatCurrency(value, summary().currency || defaultCurrency())
@@ -122,8 +110,6 @@ async function loadCarts(): Promise<void> {
     campaigns.set(data.campaigns)
     defaultCurrency.set(data.defaultCurrency || 'USD')
     defaultIdleHours.set(data.defaultIdleHours || 4)
-    if (page() > totalPages())
-      page.set(totalPages())
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -163,8 +149,6 @@ async function createCampaign(payload: Record<string, unknown>): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, totalPages)
-
 onMount(() => {
   void loadCarts()
 })
@@ -214,8 +198,7 @@ onMount(() => {
       <label><span class="sr-only">Filter by how long the cart has been idle</span><select x-model="idleFilter" class="px-3 py-2 w-full 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="all">Any age</option><option value="4">Idle 4h or more</option><option value="24">Idle a day or more</option><option value="72">Idle 3 days or more</option></select></label>
       <label><span class="sr-only">Sort carts</span><select x-model="sort" class="px-3 py-2 w-full 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="value">Highest value</option><option value="idle">Longest idle</option><option value="customer">Customer</option></select></label>
     </div>
-    <AbandonedCartsTable :records="visibleRecords()" :loading="loading()" />
-    <div :if="filteredRecords().length > perPage" class="flex items-center justify-between"><p class="text-gray-500 text-sm dark:text-neutral-400">Page {{ page() }} of {{ totalPages() }}</p><div class="flex gap-2"><Button :disabled="page() === 1" variant="secondary" @click="previousPage()">Previous</Button><Button :disabled="page() === totalPages()" variant="secondary" @click="nextPage()">Next</Button></div></div>
+    <AbandonedCartsTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" />
   </section>
 </div>