@stacksjs/defaults 0.75.277 → 0.75.280

package/ide/vscode/package.json

@@ -2,7 +2,7 @@
   "publisher": "Stacks",
   "name": "vscode-stacks",
   "displayName": "Stacks",
-  "version": "0.75.277",
+  "version": "0.75.280",
   "description": "Stacks, built into VS Code: stx templates, pickier linting and formatting, encrypted env files, the dev server preview and every buddy command. No other extensions required.",
   "license": "MIT",
   "funding": "https://github.com/sponsors/chrisbbreuer",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.75.277",
+  "version": "0.75.280",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/stacksjs/stacks.git",
@@ -45,9 +45,9 @@
   "dependencies": {
     "@iconify-json/f7": "^1.2.2",
     "@iconify-json/hugeicons": "^1.2.35",
-    "@stacksjs/mobile": "0.75.277",
+    "@stacksjs/mobile": "0.75.280",
     "@stacksjs/sanitizer": "0.2.669",
-    "@stacksjs/stx": "0.2.670",
+    "@stacksjs/stx": "0.2.671",
     "@xterm/addon-fit": "^0.11.0",
     "@xterm/xterm": "^6.0.0",
     "ts-qr-codes": "^0.1.8"

package/resources/components/Dashboard/Analytics/CampaignAnalytics.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { AnalyticsRange, CampaignAnalyticsResponse } from '../../../../functions/analytics'
 import { fetchCampaignAnalytics } from '../../../../functions/analytics'
@@ -34,6 +36,23 @@ function campaigns(): CampaignAnalyticsResponse['campaigns'] {
   return analytics()?.campaigns || []
 }
 
+/**
+ * Every campaign in the range, so this is the one table on the page that
+ * grows without bound: it pages. Counts the campaign did not record read
+ * "Not recorded" rather than 0, and spend is formatted in each campaign's own
+ * currency, never summed across them.
+ */
+const CAMPAIGN_COLUMNS = [
+  { key: 'name', label: 'Campaign', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'type', label: 'Channel', sortable: true },
+  { key: 'status', label: 'Status', sortable: true },
+  { key: 'sentCount', label: 'Sent', type: 'number' as const, sortable: true, align: 'right' as const, emptyText: 'Not recorded' },
+  { key: 'opens', label: 'Opens', type: 'number' as const, sortable: true, align: 'right' as const, emptyText: 'Not recorded' },
+  { key: 'clicks', label: 'Clicks', type: 'number' as const, sortable: true, align: 'right' as const, emptyText: 'Not recorded' },
+  { key: 'conversions', label: 'Conversions', type: 'number' as const, sortable: true, align: 'right' as const, emptyText: 'Not recorded' },
+  { key: 'spent', label: 'Spent', type: 'currency' as const, currencyKey: 'currency', sortable: true, align: 'right' as const, emptyText: 'Not recorded' },
+]
+
 function channels(): CampaignAnalyticsResponse['channels'] {
   return analytics()?.channels || []
 }
@@ -141,36 +160,15 @@ onMount(() => {
         <h2 class="font-semibold text-gray-900 dark:text-white">Campaign performance</h2>
         <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Engagement counts are derived from each campaign's recorded sent count and rates.</p>
       </div>
-      <div 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-700/50">
-            <tr>
-              <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Campaign</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Channel</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Sent</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Opens</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Clicks</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Conversions</th>
-              <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Spent</th>
-            </tr>
-          </thead>
-          <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-            <template :for="campaign in campaigns()">
-              <tr>
-                <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ campaign.name }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ campaign.type }}</td>
-                <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ campaign.status }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.sentCount) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.opens) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.clicks) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(campaign.conversions) }}</td>
-                <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatMoney(campaign.spent, campaign.currency) }}</td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
+      <Table
+        :columns="CAMPAIGN_COLUMNS"
+        :data="campaigns()"
+        :loading="isLoading()"
+        paginated
+        :page-size="25"
+        empty-title="No campaigns in this period"
+        empty-description="Create and send campaigns from Marketing to populate this table."
+      />
     </section>
 
     <section class="grid gap-6 grid-cols-1 xl:grid-cols-2">

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

@@ -5,7 +5,6 @@ import type {
 } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CategoryIndexResponse {
   records: CommerceCategoryRecord[]
@@ -29,8 +28,6 @@ const search = state('')
 const activeFilter = state('all')
 const hierarchyFilter = state('all')
 const sort = state('order')
-const page = state(1)
-const pageSize = 20
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -72,15 +69,6 @@ function filteredRecords(): CommerceCategoryRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): CommerceCategoryRecord[] {
-  const selectedPage = Math.min(page(), pageCount())
-  return filteredRecords().slice((selectedPage - 1) * pageSize, selectedPage * pageSize)
-}
-
 function matchingLabel(): string {
   const count = filteredRecords().length
   return `${count} matching ${count === 1 ? 'category' : 'categories'}`
@@ -114,13 +102,13 @@ function exportHref(): string {
   return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
 }
 
-effect(() => {
-  search()
-  activeFilter()
-  hierarchyFilter()
-  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(), activeFilter(), hierarchyFilter(), sort()])
+}
 
 async function loadCategories(): Promise<void> {
   loading.set(true)
@@ -129,7 +117,6 @@ async function loadCategories(): Promise<void> {
     const data = await dashboardApi<CategoryIndexResponse>('/api/dashboard/commerce/categories')
     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('Product categories could not be loaded.')
@@ -231,8 +218,6 @@ async function deleteCategory(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadCategories()
 })
@@ -267,14 +252,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">{{ matchingLabel() }}</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>
 
-    <CommerceCategoriesTable :records="visibleRecords()" :all-records="records()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+    <CommerceCategoriesTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :all-records="records()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -1,43 +1,86 @@
+@import('../UI/Table')
+
 <script client>
 import type { CommerceCategoryRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-category-records'
 
 const records = useReactiveProp('records', [] as CommerceCategoryRecord[])
 const allRecords = useReactiveProp('allRecords', [] as CommerceCategoryRecord[])
 const loading = useReactiveProp('loading', false)
-const emit = defineEmits<{
-  view: [record: CommerceCategoryRecord]
-  edit: [record: CommerceCategoryRecord]
-  delete: [record: CommerceCategoryRecord]
-}>()
+/** 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 parentName(record: CommerceCategoryRecord): string {
   if (!record.parentCategoryId)
     return 'Root category'
   return allRecords().find(parent => parent.id === record.parentCategoryId)?.name || 'Unknown parent'
 }
+
+/**
+ * Only the category cell is slotted, for its initial. The parent comes from
+ * `allRecords`, which can hold categories the current filter hides, so it is
+ * resolved into the row rather than looked up per cell.
+ */
+const COLUMNS = [
+  { key: 'name', label: 'Category', sortable: true, slotted: true },
+  { key: 'parentLabel', label: 'Hierarchy', sortable: true, subtitleKey: 'slug', class: 'text-gray-700 dark:text-neutral-200' },
+  { key: 'displayOrder', label: 'Display order', type: 'number' as const, sortable: true, class: 'font-mono' },
+  {
+    key: 'availability',
+    label: 'Availability',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { active: 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300' },
+    badgeLabels: { active: 'Active', inactive: 'Inactive' },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View', icon: 'i-hugeicons-view' },
+  { action: 'edit', label: 'Edit', icon: 'i-hugeicons-edit-02' },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  initial: record.name.slice(0, 1).toUpperCase(),
+  summary: record.description || record.slug,
+  parentLabel: parentName(record),
+  availability: record.isActive ? 'active' : 'inactive',
+})))
+
+function handleRowAction(payload: { action: string, row: CommerceCategoryRecord }): 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()" class="flex items-center justify-center py-16 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 categories</div>
-  <div :if="!loading() && records().length === 0" class="py-16 text-center">
-    <div class="mb-3 mx-auto h-8 w-8 text-gray-400 i-hugeicons-tags"></div>
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No product categories found</p>
-    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Category record.</p>
-  </div>
-  <div :if="!loading() && records().length > 0" 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/60"><tr><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Category</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Hierarchy</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Display order</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Availability</th><th class="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/70 dark:hover:bg-neutral-900/40">
-            <td class="px-4 py-3"><div class="flex gap-3 items-center"><span class="flex items-center justify-center shrink-0 h-9 w-9 font-semibold text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ record.name.slice(0, 1).toUpperCase() }}</span><div class="min-w-0"><Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.name }}</Button><p class="mt-1 max-w-96 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.description || record.slug }}</p></div></div></td>
-            <td class="px-4 py-3"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ parentName(record) }}</p><p class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500">{{ record.slug }}</p></td>
-            <td class="px-4 py-3 font-mono text-gray-700 text-sm dark:text-neutral-200">{{ record.displayOrder }}</td>
-            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (record.isActive ? 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300' : 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300')">{{ record.isActive ? 'Active' : 'Inactive' }}</span></td>
-            <td class="px-4 py-3"><div class="flex gap-1 justify-end"><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-02"></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="20"
+  empty-title="No product categories found"
+  empty-description="Adjust the filters or add a native Category record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <div class="flex gap-3 items-center">
+      <span class="flex items-center justify-center shrink-0 h-9 w-9 font-semibold text-blue-700 text-sm dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md" x-text="row.initial"></span>
+      <div class="min-w-0">
+        <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.name"></p>
+        <p class="mt-1 max-w-96 text-gray-400 text-xs truncate dark:text-neutral-500" x-text="row.summary"></p>
+      </div>
+    </div>
+  </template>
+</Table>

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

@@ -8,7 +8,6 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { minorToInput } from '@stacksjs/commerce/money'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CouponIndexResponse {
   records: CouponRecord[]
@@ -38,8 +37,6 @@ const statusFilter = state('all')
 const enabledFilter = state('all')
 const typeFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const pageSize = 20
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -80,15 +77,6 @@ function filteredRecords(): CouponRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): CouponRecord[] {
-  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()
   return [
@@ -121,14 +109,13 @@ function exportHref(): string {
   return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
 }
 
-effect(() => {
-  search()
-  statusFilter()
-  enabledFilter()
-  typeFilter()
-  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(), enabledFilter(), typeFilter(), sort()])
+}
 
 async function loadCoupons(): Promise<void> {
   loading.set(true)
@@ -137,7 +124,6 @@ async function loadCoupons(): Promise<void> {
     const data = await dashboardApi<CouponIndexResponse>('/api/dashboard/commerce/coupons')
     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('Coupons could not be loaded.')
@@ -242,8 +228,6 @@ async function deleteCoupon(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadCoupons()
 })
@@ -279,14 +263,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 coupons</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>
 
-    <CommerceCouponsTable :records="visibleRecords()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+    <CommerceCouponsTable :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/CommerceCouponsTable.stx

@@ -1,20 +1,18 @@
+@import('../UI/Table')
+
 <script client>
 import type { CouponRecord } from '../../../../app/Actions/Dashboard/Commerce/coupon-records'
 import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CouponRecord[])
 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 currency = useReactiveProp('currency', 'USD')
 const emit = defineEmits()
 
-function statusClass(status: string): string {
-  if (status === 'Active')
-    return 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300'
-  if (status === 'Scheduled')
-    return 'bg-blue-100 text-blue-800 dark:bg-blue-950/50 dark:text-blue-300'
-  return 'bg-gray-100 text-gray-700 dark:bg-neutral-700 dark:text-neutral-300'
-}
-
 // A percentage is a rate, not money; a fixed amount is integer minor units.
 function discount(record: CouponRecord): string {
   return record.discountType === 'percentage'
@@ -22,47 +20,69 @@ function discount(record: CouponRecord): string {
     : formatCurrency(record.discountValue, currency())
 }
 
-function date(value: string): string {
-  if (!value)
-    return 'No date'
-  const parsed = new Date(`${value}T00:00:00`)
-  return Number.isNaN(parsed.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(parsed)
+const COLUMNS = [
+  { key: 'codeLabel', label: 'Coupon', sortable: true, subtitleKey: 'descriptionLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'discountLabel', label: 'Discount', subtitleKey: 'discountKind', searchable: false, class: 'font-semibold text-gray-700 whitespace-nowrap dark:text-neutral-200' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      Active: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/50 dark:text-emerald-300',
+      Scheduled: 'bg-blue-100 text-blue-800 dark:bg-blue-950/50 dark:text-blue-300',
+    },
+  },
+  {
+    key: 'availability',
+    label: 'Availability',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { enabled: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' },
+    badgeLabels: { enabled: 'Enabled', disabled: 'Disabled' },
+  },
+  { key: 'usageLabel', label: 'Usage', align: 'right' as const, searchable: false, class: 'font-mono whitespace-nowrap' },
+  // Calendar dates: parseDashboardDate reads them as that day in every zone.
+  { key: 'startDate', label: 'Starts', type: 'date' as const, sortable: true, emptyText: 'No date', class: 'whitespace-nowrap' },
+  { key: 'endDate', label: 'Ends', type: 'date' as const, sortable: true, emptyText: 'No date', class: 'whitespace-nowrap' },
+]
+
+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,
+  codeLabel: record.code || 'No code',
+  descriptionLabel: record.description || 'No description recorded',
+  discountLabel: discount(record),
+  discountKind: record.discountType === 'percentage' ? 'Percentage' : 'Fixed amount',
+  availability: record.isActive ? 'enabled' : 'disabled',
+  usageLabel: `${record.usageCount.toLocaleString()} / ${record.usageLimit ? record.usageLimit.toLocaleString() : 'No limit'}`,
+})))
+
+function handleRowAction(payload: { action: string, row: CouponRecord }): 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 coupons</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 coupons found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a coupon 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">Coupon</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Discount</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">Availability</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Usage</th>
-        <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Dates</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.code || 'No code' }}</Button><p class="mt-1 max-w-xs text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.description || 'No description recorded' }}</p></td>
-            <td class="px-4 py-4 text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200"><span class="font-semibold">{{ discount(record) }}</span><p class="mt-1 text-gray-400 text-xs">{{ record.discountType === 'percentage' ? 'Percentage' : 'Fixed amount' }}</p></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)">{{ record.status }}</span></td>
-            <td class="px-4 py-4 text-sm whitespace-nowrap"><span :class="record.isActive ? 'text-emerald-700 dark:text-emerald-300' : 'text-gray-500 dark:text-neutral-400'">{{ record.isActive ? 'Enabled' : 'Disabled' }}</span></td>
-            <td class="px-4 py-4 font-mono text-gray-700 text-right text-sm whitespace-nowrap dark:text-neutral-200">{{ record.usageCount.toLocaleString() }} / {{ record.usageLimit ? record.usageLimit.toLocaleString() : 'No limit' }}</td>
-            <td class="px-4 py-4 min-w-44 text-gray-500 text-sm dark:text-neutral-400"><p>{{ date(record.startDate) }}</p><p class="mt-1 text-xs">to {{ date(record.endDate) }}</p></td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'View ' + record.code" @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.code" @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.code" @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="codeLabel"
+  paginated
+  :page-size="20"
+  empty-title="No coupons found"
+  empty-description="Add a coupon or adjust the current filters."
+  @row-action="handleRowAction"
+/>

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

@@ -6,7 +6,6 @@ import type {
 import { DashboardApiError, dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
 import { formatCurrency, minorToInput } from '@stacksjs/commerce/money'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface CustomerIndexResponse {
   records: CommerceCustomerRecord[]
@@ -37,8 +36,6 @@ const currency = state('USD')
 const search = state('')
 const statusFilter = state('all')
 const sort = state('name')
-const page = state(1)
-const pageSize = 15
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -85,15 +82,6 @@ function filteredRecords(): CommerceCustomerRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): CommerceCustomerRecord[] {
-  const selectedPage = Math.min(page(), pageCount())
-  return filteredRecords().slice((selectedPage - 1) * pageSize, selectedPage * pageSize)
-}
-
 function matchingLabel(): string {
   const count = filteredRecords().length
   return `${count} matching ${count === 1 ? 'customer' : 'customers'}`
@@ -127,12 +115,13 @@ function exportHref(): string {
   return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
 }
 
-effect(() => {
-  search()
-  statusFilter()
-  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(), sort()])
+}
 
 async function loadCustomers(): Promise<void> {
   loading.set(true)
@@ -142,7 +131,6 @@ async function loadCustomers(): Promise<void> {
     records.set(Array.isArray(data.records) ? data.records : [])
     summary.set(data.summary ?? { ...emptySummary })
     currency.set(data.currency || 'USD')
-    page.set(Math.min(page(), Math.max(1, Math.ceil((data.records?.length || 0) / pageSize))))
   }
   catch (error) {
     loadError.set('Customer records could not be loaded.')
@@ -244,8 +232,6 @@ async function deleteCustomer(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadCustomers()
 })
@@ -277,14 +263,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">{{ matchingLabel() }}</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>
 
-    <CommerceCustomersTable :records="visibleRecords()" :loading="loading()" :currency="currency()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+    <CommerceCustomersTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" :currency="currency()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>