@stacksjs/defaults 0.75.231 → 0.75.236

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

@@ -1,5 +1,6 @@
 <script client>
 import { dashboardApi } from '../../../../../functions/dashboard-api'
+import { useRecordsDashboard } from '../../../../../functions/dashboard-list'
 import { pushToast } from '../../../../../functions/toasts'
 
 type SerializedList = string | string[] | null | undefined
@@ -30,21 +31,47 @@ interface ShippingZonePayload {
   status: 'active' | 'inactive' | 'draft'
 }
 
-const records = state<ShippingZoneRecord[]>([])
+function matchesQuery(records: ShippingZoneRecord[], query: string): ShippingZoneRecord[] {
+  return records.filter(record => [
+    record.name,
+    record.status,
+    record.shipping_method?.name,
+    ...listTokens(record.countries),
+    ...listTokens(record.regions),
+    ...listTokens(record.postal_codes),
+  ].some(value => String(value || '').toLowerCase().includes(query)))
+}
+
+const {
+  records,
+  loading,
+  loadError,
+  search,
+  page,
+  perPage,
+  editorOpen,
+  editorMode,
+  editing,
+  saving,
+  editorError,
+  deleting,
+  deleteBusy,
+  deleteError,
+  filteredRecords,
+  paginatedRecords,
+  goToPage,
+  handleSearch,
+  openCreate,
+  openEdit,
+  closeEditor,
+  requestDelete,
+  closeDelete,
+  upsert,
+  remove,
+  clampPage,
+} = useRecordsDashboard<ShippingZoneRecord>({ filter: matchesQuery })
+
 const methods = state<ShippingMethodOption[]>([])
-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<ShippingZoneRecord | null>(null)
-const saving = state(false)
-const editorError = state('')
-const deleting = state<ShippingZoneRecord | null>(null)
-const deleteBusy = state(false)
-const deleteError = state('')
 
 function listTokens(value: SerializedList): string[] {
   if (Array.isArray(value))
@@ -73,25 +100,6 @@ function withMethod(record: ShippingZoneRecord): ShippingZoneRecord {
   }
 }
 
-function filteredRecords(): ShippingZoneRecord[] {
-  const query = search().trim().toLowerCase()
-  if (!query)
-    return records()
-  return records().filter(record => [
-    record.name,
-    record.status,
-    record.shipping_method?.name,
-    ...listTokens(record.countries),
-    ...listTokens(record.regions),
-    ...listTokens(record.postal_codes),
-  ].some(value => String(value || '').toLowerCase().includes(query)))
-}
-
-function paginatedRecords(): ShippingZoneRecord[] {
-  const start = (page() - 1) * perPage()
-  return filteredRecords().slice(start, start + perPage())
-}
-
 function uniqueCount(field: 'countries' | 'regions'): number {
   return new Set(records().flatMap(record => listTokens(record[field]))).size
 }
@@ -122,9 +130,7 @@ async function loadZones(): Promise<void> {
       throw new TypeError('Shipping zone resources were not returned as arrays.')
     methods.set(methodData)
     records.set(zoneData.map(withMethod))
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -135,33 +141,6 @@ async function loadZones(): Promise<void> {
   }
 }
 
-function handleSearch(value: string): void {
-  search.set(value)
-  page.set(1)
-}
-
-function openCreate(): void {
-  editing.set(null)
-  editorMode.set('create')
-  editorError.set('')
-  editorOpen.set(true)
-}
-
-function openEdit(record: ShippingZoneRecord): void {
-  editing.set(record)
-  editorMode.set('edit')
-  editorError.set('')
-  editorOpen.set(true)
-}
-
-function closeEditor(): void {
-  if (saving())
-    return
-  editorOpen.set(false)
-  editing.set(null)
-  editorError.set('')
-}
-
 function setEditorError(message: string): void {
   editorError.set(message)
 }
@@ -181,14 +160,7 @@ async function saveZone(payload: ShippingZonePayload): Promise<void> {
       },
     )
     const hydrated = withMethod(updated)
-    if (current) {
-      records.set(records().map(record => record.id === current.id ? hydrated : record))
-    }
-    else {
-      const nextRecords = [...records(), hydrated]
-      records.set(nextRecords)
-      page.set(Math.max(1, Math.ceil(nextRecords.length / perPage())))
-    }
+    upsert(hydrated, current)
     editorOpen.set(false)
     editing.set(null)
     pushToast('success', current ? 'Shipping zone updated' : 'Shipping zone added', {
@@ -203,18 +175,6 @@ async function saveZone(payload: ShippingZonePayload): Promise<void> {
   }
 }
 
-function requestDelete(record: ShippingZoneRecord): void {
-  deleting.set(record)
-  deleteError.set('')
-}
-
-function closeDelete(): void {
-  if (deleteBusy())
-    return
-  deleting.set(null)
-  deleteError.set('')
-}
-
 async function confirmDelete(): Promise<void> {
   const current = deleting()
   if (!current)
@@ -225,11 +185,9 @@ async function confirmDelete(): Promise<void> {
     await dashboardApi(`/api/dashboard/commerce/shipping-zones/${current.id}`, {
       method: 'DELETE',
     })
-    records.set(records().filter(record => record.id !== current.id))
+    remove(current)
     deleting.set(null)
-    const lastPage = Math.max(1, Math.ceil(filteredRecords().length / perPage()))
-    if (page() > lastPage)
-      page.set(lastPage)
+    clampPage()
     pushToast('success', 'Shipping zone deleted', { detail: current.name })
   }
   catch (error) {
@@ -240,10 +198,6 @@ async function confirmDelete(): Promise<void> {
   }
 }
 
-function goToPage(value: number): void {
-  page.set(value)
-}
-
 onMount(() => {
   void loadZones()
 })
@@ -252,23 +206,17 @@ onMount(() => {
 <div class="space-y-6">
   <TabNavigation model-value="zones" />
 
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Shipping zones</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Map methods to persisted country, region, and postal coverage.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadZones()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button :disabled="loading() || methods().length === 0" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add zone</Button>
-    </div>
-  </header>
+  <PageHeader title="Shipping zones" description="Map methods to persisted country, region, and postal coverage.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadZones()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button :disabled="loading() || methods().length === 0" @click="openCreate()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add zone</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadZones()">Retry</Button></div>
   <div :if="!loading() && methods().length === 0" class="p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">Add a shipping method before creating a zone.</div>
 
-  <section aria-label="Shipping zone metrics" class="grid gap-3 grid-cols-1 sm:grid-cols-2 xl:grid-cols-4">
-    <template :for="item in metricCards()" :key="item.label"><article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p></article></template>
-  </section>
+  <MetricCards label="Shipping zone metrics" columns="grid-cols-1 sm:grid-cols-2 xl:grid-cols-4" :items="metricCards()" />
 
   <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
     <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between px-4 py-4 border-b border-gray-200 dark:border-neutral-700">

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

@@ -1,4 +1,5 @@
 <script client>
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 import type {
   PrintDeviceRecord,
   PrintDeviceStatus,
@@ -51,10 +52,7 @@ function submit(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -6,6 +6,7 @@ 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[]
@@ -234,13 +235,7 @@ async function deletePrintDevice(): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  page.set(Math.max(1, page() - 1))
-}
-
-function nextPage(): void {
-  page.set(Math.min(pageCount(), page() + 1))
-}
+const { previousPage, nextPage } = pageControls(page, pageCount)
 
 onMount(() => {
   void loadPrintDevices()
@@ -248,29 +243,17 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Receipt printers</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage native PrintDevice records and inspect their persisted operational state.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadPrintDevices"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" variant="secondary" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
-      <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add printer</Button>
-    </div>
-  </header>
+  <PageHeader title="Receipt printers" description="Manage native PrintDevice records and inspect their persisted operational state.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadPrintDevices"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" variant="secondary" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export filtered</Button>
+    <Button @click="openAdd()"><span class="h-4 w-4 i-hugeicons-add-01"></span>Add printer</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 
-  <section aria-label="Print device metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
-    <template :for="item in metricCards()" :key="item.label">
-      <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-        <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
-        <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Print device metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <PrintDeviceBreakdown :records="records()" />
 

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

@@ -189,28 +189,16 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Print logs</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Inspect native Receipt records from configured print devices.</p>
-    </div>
-    <div class="flex flex-wrap gap-2">
-      <Button variant="secondary" :loading="loading()" @click="loadPrintLogs"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current page</Button>
-    </div>
-  </header>
+  <PageHeader title="Print logs" description="Inspect native Receipt records from configured print devices.">
+  <div class="flex flex-wrap gap-2">
+    <Button variant="secondary" :loading="loading()" @click="loadPrintLogs"><span :if="!loading()" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button tag="a" :href="exportHref()" :download="exportFilename()"><span class="h-4 w-4 i-hugeicons-download-04"></span>Export current page</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 
-  <section aria-label="Print log metrics" class="grid gap-3 grid-cols-2 lg:grid-cols-4">
-    <template :for="item in metricCards()" :key="item.label">
-      <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-        <p class="text-gray-500 text-xs dark:text-neutral-400">{{ item.label }}</p>
-        <p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ item.value }}</p>
-        <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ item.detail }}</p>
-      </article>
-    </template>
-  </section>
+  <MetricCards label="Print log metrics" columns="grid-cols-2 lg:grid-cols-4" :items="metricCards()" />
 
   <PrintLogBreakdown :records="records()" />
 

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

@@ -150,22 +150,18 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Product Waitlist</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Native WaitlistProduct records without simulated customers or activity.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
-        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <Button :disabled="isLoading() || options().products.length === 0" @click="openAddDialog()">
-        <span class="h-4 w-4 i-hugeicons-add-01"></span>
-        Add entry
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Product Waitlist" description="Native WaitlistProduct records without simulated customers or activity.">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
+      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <Button :disabled="isLoading() || options().products.length === 0" @click="openAddDialog()">
+      <span class="h-4 w-4 i-hugeicons-add-01"></span>
+      Add entry
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
   <div :if="!isLoading() && options().products.length === 0" class="p-4 text-amber-800 text-sm dark:text-amber-200 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 rounded-lg dark:border-amber-900">

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

@@ -1,5 +1,6 @@
 <script client>
 import type { ProductWaitlistOptions, ProductWaitlistRecord, ProductWaitlistWritePayload } from '../../../../app/Actions/Dashboard/Commerce/product-waitlist-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 type DialogMode = 'add' | 'edit'
 
@@ -94,10 +95,7 @@ function submitForm(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

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

@@ -207,22 +207,18 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Restaurant Waitlist</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage persisted WaitlistRestaurant records and seating states.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
-        <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-      <Button :disabled="isLoading()" @click="openAddDialog()">
-        <span class="h-4 w-4 i-hugeicons-add-01"></span>
-        Add party
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Restaurant Waitlist" description="Manage persisted WaitlistRestaurant records and seating states.">
+  <div class="flex gap-2">
+    <Button variant="secondary" :loading="isLoading()" @click="loadRecords">
+      <span :if="!isLoading()" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+    <Button :disabled="isLoading()" @click="openAddDialog()">
+      <span class="h-4 w-4 i-hugeicons-add-01"></span>
+      Add party
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

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

@@ -1,6 +1,7 @@
 <script client>
 import type { RestaurantWaitlistOptions, RestaurantWaitlistRecord, RestaurantWaitlistWritePayload } from '../../../../app/Actions/Dashboard/Commerce/restaurant-waitlist-records'
 import { restaurantWaitlistDateTimeLocal, restaurantWaitlistTimestamp } from '../../../../app/Actions/Dashboard/Commerce/restaurant-waitlist-records'
+import { formErrorMessages } from '../../../../functions/dashboard-form'
 
 type DialogMode = 'add' | 'edit'
 
@@ -104,10 +105,7 @@ function submitForm(): void {
 }
 
 function errorMessages(): string[] {
-  return Object.entries(errors()).map(([field, message]) => {
-    const label = field.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-    return `${label.charAt(0).toUpperCase()}${label.slice(1)}: ${message}`
-  })
+  return formErrorMessages(errors())
 }
 </script>
 

package/resources/components/Dashboard/Deployments/DeploymentList.stx

@@ -200,27 +200,23 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Deployments</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Deployment model records through the guarded dashboard API.</p>
-    </div>
-    <div class="flex gap-2 items-center">
-      <Button :disabled="isStarting() || isPreviewing()" variant="outline" @click="openDeploymentDialog('preview')">
-        Preview
-      </Button>
-      <Button :disabled="isStarting() || isPreviewing() || isRollingBack()" variant="secondary" @click="openRollback">
-        Rollback
-      </Button>
-      <Button :disabled="isStarting() || isPreviewing()" @click="openDeploymentDialog('deploy')">
-        Deploy
-      </Button>
-      <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
-        <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
-        Refresh
-      </Button>
-    </div>
-  </header>
+  <PageHeader title="Deployments" description="Deployment model records through the guarded dashboard API.">
+  <div class="flex gap-2 items-center">
+    <Button :disabled="isStarting() || isPreviewing()" variant="outline" @click="openDeploymentDialog('preview')">
+      Preview
+    </Button>
+    <Button :disabled="isStarting() || isPreviewing() || isRollingBack()" variant="secondary" @click="openRollback">
+      Rollback
+    </Button>
+    <Button :disabled="isStarting() || isPreviewing()" @click="openDeploymentDialog('deploy')">
+      Deploy
+    </Button>
+    <Button :loading="isLoading()" variant="secondary" @click="loadDeployments">
+      <span :if="!isLoading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>
+      Refresh
+    </Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" class="p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900">{{ loadError() }}</div>
 

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

@@ -8,6 +8,7 @@ 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,
@@ -162,15 +163,7 @@ async function createCampaign(payload: Record<string, unknown>): Promise<void> {
   }
 }
 
-function previousPage(): void {
-  if (page() > 1)
-    page.set(page() - 1)
-}
-
-function nextPage(): void {
-  if (page() < totalPages())
-    page.set(page() + 1)
-}
+const { previousPage, nextPage } = pageControls(page, totalPages)
 
 onMount(() => {
   void loadCarts()
@@ -178,16 +171,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Abandoned Carts</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">The audience that already chose the products. Every other campaign starts by guessing.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadCarts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openCompose()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-mail-send-01"></span>New recovery campaign</Button>
-    </div>
-  </header>
+  <PageHeader title="Abandoned Carts" description="The audience that already chose the products. Every other campaign starts by guessing.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadCarts()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openCompose()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-mail-send-01"></span>New recovery campaign</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCarts()">Retry</Button></div>
 

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

@@ -7,6 +7,7 @@ import type {
 import type { CampaignDeliveryOperation } from '../../../../app/Actions/Dashboard/Marketing/campaign-delivery'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
+import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CampaignIndexResponse {
   records: CampaignRecord[]
@@ -271,15 +272,7 @@ async function confirmDelivery(payload: { scheduledAt?: string }): Promise<void>
   }
 }
 
-function previousPage(): void {
-  if (page() > 1)
-    page.set(page() - 1)
-}
-
-function nextPage(): void {
-  if (page() < totalPages())
-    page.set(page() + 1)
-}
+const { previousPage, nextPage } = pageControls(page, totalPages)
 
 onMount(() => {
   void loadCampaigns()
@@ -287,16 +280,12 @@ onMount(() => {
 </script>
 
 <div class="space-y-6">
-  <header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
-    <div>
-      <h1 class="font-bold text-2xl text-gray-900 dark:text-white">Campaigns</h1>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Manage Campaign records with real audience and delivery aggregates.</p>
-    </div>
-    <div class="flex gap-2">
-      <Button :loading="loading()" variant="secondary" @click="loadCampaigns()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
-      <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add campaign</Button>
-    </div>
-  </header>
+  <PageHeader title="Campaigns" description="Manage Campaign records with real audience and delivery aggregates.">
+  <div class="flex gap-2">
+    <Button :loading="loading()" variant="secondary" @click="loadCampaigns()"><span :if="!loading()" aria-hidden="true" class="h-4 w-4 i-hugeicons-refresh"></span>Refresh</Button>
+    <Button @click="openAdd()"><span aria-hidden="true" class="h-4 w-4 i-hugeicons-add-01"></span>Add campaign</Button>
+  </div>
+  </PageHeader>
 
   <div :if="loadError()" role="alert" class="flex gap-4 items-center justify-between p-4 text-red-700 text-sm dark:text-red-300 bg-red-50 dark:bg-red-950/30 border border-red-200 rounded-lg dark:border-red-900"><span>{{ loadError() }}</span><Button variant="secondary" size="sm" @click="loadCampaigns()">Retry</Button></div>