@stacksjs/defaults 0.75.277 → 0.75.280

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

@@ -1,14 +1,14 @@
+@import('../UI/Table')
+
 <script client>
 import type { AbandonedCartRecord } from '../../../../app/Actions/Dashboard/Marketing/abandoned-cart-records'
-import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as AbandonedCartRecord[])
 const loading = useReactiveProp('loading', false)
-
-/** A cart's total is integer minor units, like every commerce amount (stacksjs/stacks#2851). */
-function money(value: number, currency: string): string {
-  return formatCurrency(value, currency)
-}
+/** 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', '')
 
 /**
  * How long ago, in the units a person would actually say it in.
@@ -32,60 +32,64 @@ function contents(record: AbandonedCartRecord): string {
   return rest > 0 ? `${shown} +${rest} more` : shown
 }
 
-function stateLabel(record: AbandonedCartRecord): string {
-  if (record.state === 'recovered')
-    return 'Recovered'
-  if (record.state === 'expired')
-    return 'Expired'
-  return record.contacted ? 'Chased' : 'Cold'
+/** Recovered and expired by state; an open cart by whether anyone has chased it yet. */
+function stateKey(record: AbandonedCartRecord): string {
+  if (record.state === 'recovered' || record.state === 'expired')
+    return record.state
+  return record.contacted ? 'chased' : 'cold'
 }
 
-function stateClass(record: AbandonedCartRecord): string {
-  if (record.state === 'recovered')
-    return 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300'
-  if (record.state === 'expired')
-    return 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
-  return record.contacted
-    ? 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300'
-    : 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300'
-}
+/**
+ * A cart's total is integer minor units, like every commerce amount
+ * (stacksjs/stacks#2851), so value is a currency column in the cart's own
+ * currency. Idle reads as words, and sorts by the hours behind them.
+ */
+const COLUMNS = [
+  { key: 'customerName', label: 'Customer', sortable: true, subtitleKey: 'emailLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'contentsLabel', label: 'Left behind', subtitleKey: 'cartLabel', class: 'text-gray-900 dark:text-white' },
+  { key: 'value', label: 'Value', type: 'currency' as const, currencyKey: 'currency', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'idleHours', label: 'Idle', sortable: true, slotted: true },
+  {
+    key: 'stateKey',
+    label: 'State',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      recovered: 'bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300',
+      expired: 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300',
+      chased: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
+      cold: 'bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300',
+    },
+    badgeLabels: { recovered: 'Recovered', expired: 'Expired', chased: 'Chased', cold: 'Cold' },
+  },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  emailLabel: record.customerEmail || 'No address on the cart',
+  contentsLabel: contents(record),
+  cartLabel: `Cart #${record.id}`,
+  idleLabel: idle(record.idleHours),
+  stateKey: stateKey(record),
+})))
 </script>
 
-<div class="overflow-x-auto bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <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 dark:text-neutral-300">Customer</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Left behind</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Value</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Idle</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">State</th>
-      </tr>
-    </thead>
-    <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-      <template :if="loading()">
-        <tr><td colspan="5" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading carts</td></tr>
-      </template>
-      <template :else-if="records().length === 0">
-        <tr><td colspan="5" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-shopping-cart-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No carts to chase</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Nothing matches these filters, which, for once, is the good outcome.</p></td></tr>
-      </template>
-      <template :else>
-        <template :for="record in records">
-          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-700/40">
-            <td class="px-4 py-4 max-w-xs">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.customerName }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.customerEmail || 'No address on the cart' }}</p>
-            </td>
-            <td class="px-4 py-4 max-w-sm">
-              <p class="text-gray-900 text-sm dark:text-white">{{ contents(record) }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Cart #{{ record.id }}</p>
-            </td>
-            <td class="px-4 py-4"><p class="font-medium tabular-nums text-gray-900 text-sm dark:text-white">{{ money(record.value, record.currency) }}</p></td>
-            <td class="px-4 py-4"><p class="text-gray-900 text-sm dark:text-white">{{ idle(record.idleHours) }}</p></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + stateClass(record)">{{ stateLabel(record) }}</span></td>
-          </tr>
-        </template>
-      </template>
-    </tbody>
-  </table>
-</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()"
+  paginated
+  :page-size="10"
+  empty-title="No carts to chase"
+  empty-description="Nothing matches these filters, which, for once, is the good outcome."
+>
+  <template #cell="{ row }">
+    <p class="text-gray-900 text-sm dark:text-white" x-text="row.idleLabel"></p>
+  </template>
+</Table>

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

@@ -7,7 +7,6 @@ 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[]
@@ -60,8 +59,6 @@ const typeFilter = state('all')
 const statusFilter = state('all')
 const listFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const perPage = 10
 const dialogOpen = state(false)
 const dialogMode = state<'add' | 'edit'>('add')
 const editingRecord = state<CampaignRecord | null>(null)
@@ -105,24 +102,14 @@ function filteredRecords(): CampaignRecord[] {
     })
 }
 
-function visibleRecords(): CampaignRecord[] {
-  const start = (page() - 1) * perPage
-  return filteredRecords().slice(start, start + 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(), typeFilter(), statusFilter(), listFilter(), sort()])
 }
 
-function totalPages(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / perPage))
-}
-
-effect(() => {
-  search()
-  typeFilter()
-  statusFilter()
-  listFilter()
-  sort()
-  page.set(1)
-})
-
 async function loadCampaigns(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -134,8 +121,6 @@ async function loadCampaigns(): Promise<void> {
     summary.set(data.summary)
     lists.set(data.lists)
     defaultCurrency.set(data.defaultCurrency || 'USD')
-    if (page() > totalPages())
-      page.set(totalPages())
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -272,8 +257,6 @@ async function confirmDelivery(payload: { scheduledAt?: string }): Promise<void>
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, totalPages)
-
 onMount(() => {
   void loadCampaigns()
 })
@@ -305,8 +288,7 @@ onMount(() => {
       <label><span class="sr-only">Filter campaign list</span><select x-model="listFilter" 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">All email lists</option><template :for="list in lists"><option :value="list.id">{{ list.name }}</option></template></select></label>
       <label><span class="sr-only">Sort campaigns</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="newest">Newest</option><option value="name">Name</option><option value="audience">Largest audience</option><option value="sent">Most sent</option></select></label>
     </div>
-    <CampaignsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" @deliver="openDelivery" />
-    <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>
+    <CampaignsTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" @deliver="openDelivery" />
   </section>
 </div>
 

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

@@ -1,9 +1,16 @@
+@import('../UI/Table')
+
 <script client>
 import type { CampaignRecord } from '../../../../app/Actions/Dashboard/Marketing/campaign-records'
 import type { CampaignDeliveryOperation } from '../../../../app/Actions/Dashboard/Marketing/campaign-delivery'
+import { parseDashboardDate } from '../../../../functions/dashboard-dates'
 
 const records = useReactiveProp('records', [] as CampaignRecord[])
 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 titleCase(value: string): string {
@@ -16,7 +23,7 @@ function formatDate(value: string): string {
   return new Intl.DateTimeFormat(undefined, {
     dateStyle: 'medium',
     timeStyle: 'short',
-  }).format(new Date(value.replace(' ', 'T')))
+  }).format(parseDashboardDate(value))
 }
 
 function percentage(value: number): string {
@@ -33,62 +40,78 @@ function canCancel(record: CampaignRecord): boolean {
     && ['scheduled', 'sending'].includes(record.status)
 }
 
-function requestDelivery(mode: CampaignDeliveryOperation, record: CampaignRecord): void {
-  emit('deliver', { mode, record })
+function timingNote(record: CampaignRecord): string {
+  if (record.sentAt)
+    return 'Sent'
+  if (record.status === 'scheduled')
+    return 'Scheduled'
+  if (record.startDate)
+    return 'Starts'
+  return record.scheduledAt ? 'Originally scheduled' : 'No timing'
+}
+
+const COLUMNS = [
+  { key: 'name', label: 'Campaign', sortable: true, subtitleKey: 'kindLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'emailListName', label: 'Audience', sortable: true, subtitleKey: 'audienceLabel', class: 'text-gray-900 dark:text-white' },
+  { key: 'timingLabel', label: 'Timing', subtitleKey: 'timingNote', class: 'text-gray-900 dark:text-white' },
+  { key: 'sentLabel', label: 'Delivery', subtitleKey: 'ratesLabel', class: 'text-gray-900 dark:text-white' },
+  { key: 'status', label: 'Status', type: 'badge' as const, sortable: true, badgeLabelKey: 'statusLabel' },
+]
+
+/**
+ * Delivery actions only where they apply: send and schedule to an email
+ * campaign that has not gone out, cancel while one is queued or sending.
+ * Edit and delete leave a campaign that is going or gone, which the
+ * hand-rolled buttons showed disabled.
+ */
+const ROW_ACTIONS = [
+  { action: 'send', label: 'Send now', icon: 'i-hugeicons-mail-send-02', when: { key: 'sendable', equals: true } },
+  { action: 'schedule', label: 'Schedule', icon: 'i-hugeicons-calendar-03', when: { key: 'scheduleLabel', equals: 'schedule' } },
+  { action: 'schedule', label: 'Reschedule', icon: 'i-hugeicons-calendar-03', when: { key: 'scheduleLabel', equals: 'reschedule' } },
+  { action: 'cancel', label: 'Cancel delivery of', icon: 'i-hugeicons-cancel-circle', class: 'text-red-500', when: { key: 'cancellable', equals: true } },
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-02', when: { key: 'editable', equals: true } },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500', when: { key: 'deletable', equals: true } },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  kindLabel: record.subject ? `${titleCase(record.type)} · ${record.subject}` : titleCase(record.type),
+  audienceLabel: `${record.audienceSize.toLocaleString()} available`,
+  timingLabel: formatDate(record.sentAt || record.scheduledAt || record.startDate),
+  timingNote: timingNote(record),
+  sentLabel: `${record.sentCount.toLocaleString()} sent`,
+  ratesLabel: `${percentage(record.openRate)} open · ${percentage(record.clickRate)} click`,
+  statusLabel: titleCase(record.status),
+  sendable: canSend(record),
+  scheduleLabel: canSend(record) ? (record.status === 'scheduled' ? 'reschedule' : 'schedule') : 'none',
+  cancellable: canCancel(record),
+  editable: !['sending', 'sent'].includes(record.status),
+  deletable: !['scheduled', 'sending', 'sent'].includes(record.status),
+})))
+
+function handleRowAction(payload: { action: string, row: CampaignRecord }): void {
+  if (payload.action === 'edit' || payload.action === 'delete')
+    emit(payload.action, payload.row)
+  else
+    emit('deliver', { mode: payload.action as CampaignDeliveryOperation, record: payload.row })
 }
 </script>
 
-<div class="overflow-x-auto bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-  <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 dark:text-neutral-300">Campaign</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Audience</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Timing</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Delivery</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th>
-        <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
-      </tr>
-    </thead>
-    <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-      <template :if="loading()">
-        <tr><td colspan="6" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Loading campaigns</td></tr>
-      </template>
-      <template :else-if="records().length === 0">
-        <tr><td colspan="6" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-mail-send-01"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No campaigns found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a Campaign record.</p></td></tr>
-      </template>
-      <template :else>
-        <template :for="record in records">
-          <tr class="hover:bg-gray-50/70 dark:hover:bg-neutral-700/40">
-            <td class="px-4 py-4 max-w-sm">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ titleCase(record.type) }}<span :if="record.subject"> · {{ record.subject }}</span></p>
-            </td>
-            <td class="px-4 py-4">
-              <p class="text-gray-900 text-sm dark:text-white">{{ record.emailListName }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.audienceSize.toLocaleString() }} available</p>
-            </td>
-            <td class="px-4 py-4">
-              <p class="text-gray-900 text-sm dark:text-white">{{ formatDate(record.sentAt || record.scheduledAt || record.startDate) }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.sentAt ? 'Sent' : record.status === 'scheduled' ? 'Scheduled' : record.startDate ? 'Starts' : record.scheduledAt ? 'Originally scheduled' : 'No timing' }}</p>
-            </td>
-            <td class="px-4 py-4">
-              <p class="text-gray-900 text-sm dark:text-white">{{ record.sentCount.toLocaleString() }} sent</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ percentage(record.openRate) }} open · {{ percentage(record.clickRate) }} click</p>
-            </td>
-            <td class="px-4 py-4"><span class="inline-flex px-2 py-1 font-medium text-xs bg-gray-100 dark:bg-neutral-700 rounded-full">{{ titleCase(record.status) }}</span></td>
-            <td class="px-4 py-4">
-              <div class="flex gap-1 justify-end">
-                <Button :if="canSend(record)" variant="ghost" size="sm" iconOnly :ariaLabel="'Send campaign ' + record.id + ' now'" @click="requestDelivery('send', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-mail-send-02"></span></Button>
-                <Button :if="canSend(record)" variant="ghost" size="sm" iconOnly :ariaLabel="(record.status === 'scheduled' ? 'Reschedule campaign ' : 'Schedule campaign ') + record.id" @click="requestDelivery('schedule', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-calendar-03"></span></Button>
-                <Button :if="canCancel(record)" variant="ghost" size="sm" iconOnly :ariaLabel="'Cancel campaign ' + record.id + ' delivery'" @click="requestDelivery('cancel', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-cancel-circle"></span></Button>
-                <Button variant="ghost" size="sm" iconOnly :disabled="['sending', 'sent'].includes(record.status)" :ariaLabel="'Edit campaign ' + record.id" @click="emit('edit', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-02"></span></Button>
-                <Button variant="ghost" size="sm" iconOnly :disabled="['scheduled', 'sending', 'sent'].includes(record.status)" :ariaLabel="'Delete campaign ' + record.id" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </template>
-    </tbody>
-  </table>
-</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="name"
+  paginated
+  :page-size="10"
+  empty-title="No campaigns found"
+  empty-description="Adjust the filters or add a Campaign record."
+  @row-action="handleRowAction"
+/>

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

@@ -5,7 +5,6 @@ import type {
 } from '../../../../app/Actions/Dashboard/Marketing/marketing-list-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface MarketingListIndexResponse {
   records: MarketingListRecord[]
@@ -37,8 +36,6 @@ const search = state('')
 const statusFilter = state('all')
 const visibilityFilter = state('all')
 const sort = state('name')
-const page = state(1)
-const perPage = 10
 const dialogOpen = state(false)
 const dialogMode = state<'add' | 'edit'>('add')
 const editingRecord = state<MarketingListRecord | null>(null)
@@ -72,23 +69,14 @@ function filteredRecords(): MarketingListRecord[] {
     })
 }
 
-function visibleRecords(): MarketingListRecord[] {
-  const start = (page() - 1) * perPage
-  return filteredRecords().slice(start, start + 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(), statusFilter(), visibilityFilter(), sort()])
 }
 
-function totalPages(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / perPage))
-}
-
-effect(() => {
-  search()
-  statusFilter()
-  visibilityFilter()
-  sort()
-  page.set(1)
-})
-
 async function loadLists(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -98,8 +86,6 @@ async function loadLists(): Promise<void> {
       throw new TypeError('Email list resources were not returned in the expected shape.')
     records.set(data.records)
     summary.set(data.summary)
-    if (page() > totalPages())
-      page.set(totalPages())
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -194,8 +180,6 @@ async function deleteList(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, totalPages)
-
 onMount(() => {
   void loadLists()
 })
@@ -235,11 +219,7 @@ onMount(() => {
       <label><span class="sr-only">Filter visibility</span><select x-model="visibilityFilter" 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">All signup modes</option><option value="public">Public</option><option value="private">Private</option></select></label>
       <label><span class="sr-only">Sort email lists</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="name">Name</option><option value="members">Most members</option><option value="campaigns">Most campaigns</option><option value="newest">Newest</option></select></label>
     </div>
-    <MarketingListsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
-    <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>
+    <MarketingListsTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -1,82 +1,77 @@
+@import('../UI/Table')
+
 <script client>
 import type { MarketingListRecord } from '../../../../app/Actions/Dashboard/Marketing/marketing-list-records'
 
 const records = useReactiveProp('records', [] as MarketingListRecord[])
 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 formatDate(value: string): string {
-  if (!value)
-    return 'Never'
-  const timestamp = new Date(value.replace(' ', 'T')).getTime()
-  return Number.isFinite(timestamp)
-    ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(timestamp)
-    : value
-}
+/** The list cell is slotted for the drift warning beside the name. */
+const COLUMNS = [
+  { key: 'name', label: 'List', sortable: true, slotted: true },
+  { key: 'subscriberCount', label: 'Members', type: 'number' as const, sortable: true, subtitleKey: 'membersLabel', class: 'font-medium tabular-nums text-gray-900 dark:text-white' },
+  { key: 'campaignCount', label: 'Campaigns', type: 'number' as const, sortable: true, class: 'font-medium tabular-nums' },
+  { key: 'visibilityLabel', label: 'Signup', sortable: true, subtitleKey: 'optInLabel' },
+  { key: 'lastSentAt', label: 'Last sent', type: 'date' as const, sortable: true, emptyText: 'Never', class: 'whitespace-nowrap' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+      archived: 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300',
+      inactive: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+    },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  membersLabel: `${record.activeCount} active, ${record.unsubscribedCount} unsubscribed`,
+  visibilityLabel: record.isPublic ? 'Public' : 'Private',
+  optInLabel: record.doubleOptIn ? 'Double opt-in' : 'Single opt-in',
+})))
 
-function statusClass(status: string): string {
-  if (status === 'active')
-    return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
-  if (status === 'archived')
-    return 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
-  return 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
+function handleRowAction(payload: { action: string, row: MarketingListRecord }): 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 py-16 text-gray-500 text-sm dark:text-neutral-400">
-    <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-    Loading email lists
-  </div>
-  <div :else-if="records().length === 0" class="px-6 py-16 text-center">
-    <span class="inline-block h-8 w-8 text-gray-400 i-hugeicons-mail-01"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No email lists found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add an EmailList record.</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 dark:text-neutral-300">List</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Members</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Campaigns</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Signup</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Last sent</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr class="align-top">
-            <td class="px-4 py-4">
-              <div class="flex gap-2 items-center">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
-                <span :if="record.countDrift" x-tooltip="Stored counters differ from membership rows" title="Stored counters differ from membership rows" class="h-4 w-4 text-amber-500 i-hugeicons-alert-02"></span>
-              </div>
-              <p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ record.slug }}</p>
-              <p :if="record.description" class="mt-1 max-w-sm text-gray-500 text-xs dark:text-neutral-400">{{ record.description }}</p>
-            </td>
-            <td class="px-4 py-4">
-              <p class="font-medium tabular-nums text-gray-900 text-sm dark:text-white">{{ record.subscriberCount.toLocaleString() }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.activeCount }} active, {{ record.unsubscribedCount }} unsubscribed</p>
-            </td>
-            <td class="px-4 py-4 font-medium tabular-nums text-gray-700 text-sm dark:text-neutral-200">{{ record.campaignCount }}</td>
-            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300">
-              <p>{{ record.isPublic ? 'Public' : 'Private' }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.doubleOptIn ? 'Double opt-in' : 'Single opt-in' }}</p>
-            </td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.lastSentAt) }}</td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record.status)">{{ record.status }}</span></td>
-            <td class="px-4 py-4">
-              <div class="flex gap-1 justify-end">
-                <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-delete-02"></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="name"
+  paginated
+  :page-size="10"
+  empty-title="No email lists found"
+  empty-description="Adjust the filters or add an EmailList record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <div class="flex gap-2 items-center">
+      <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.name"></p>
+      <span :if="row.countDrift" x-tooltip="Stored counters differ from membership rows" title="Stored counters differ from membership rows" class="h-4 w-4 text-amber-500 i-hugeicons-alert-02"></span>
+    </div>
+    <p class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400" x-text="row.slug"></p>
+    <p :if="row.description" class="mt-1 max-w-sm text-gray-500 text-xs dark:text-neutral-400" x-text="row.description"></p>
+  </template>
+</Table>