@stacksjs/defaults 0.75.279 → 0.75.281

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>
 

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

@@ -1,61 +1,83 @@
+@import('../UI/Table')
+
 <script client>
 import type { CommerceCustomerRecord } from '../../../../app/Actions/Dashboard/Commerce/commerce-customer-records'
-import { formatCurrency } from '@stacksjs/commerce/money'
 
 const records = useReactiveProp('records', [] as CommerceCustomerRecord[])
 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 formatMoney(value: number): string {
-  return formatCurrency(value, currency())
-}
+/** Only the customer cell is slotted, for its initial. */
+const COLUMNS = [
+  { key: 'nameLabel', label: 'Customer', sortable: true, slotted: true },
+  { key: 'emailLabel', label: 'Contact', sortable: true, subtitleKey: 'phoneLabel', class: 'text-gray-700 dark:text-neutral-200' },
+  // Money is integer minor units; the row carries the store currency so the
+  // column formats it through formatCurrency, not as a bare number.
+  { key: 'totalSpent', label: 'Recorded spend', type: 'currency' as const, currencyKey: 'currency', sortable: true, class: 'font-medium' },
+  { key: 'lastOrder', label: 'Last order', type: 'date' as const, sortable: true, emptyText: 'No order recorded', class: 'whitespace-nowrap' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      Active: 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300',
+      Inactive: 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300',
+    },
+  },
+]
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'No order recorded'
-  const normalized = /^\d{4}-\d{2}-\d{2}$/.test(value)
-    ? `${value}T00:00:00`
-    : /^\d{4}-\d{2}-\d{2} \d/.test(value)
-      ? `${value.replace(' ', 'T')}Z`
-      : value
-  const date = new Date(normalized)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
-}
+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,
+  currency: currency(),
+  nameLabel: record.name || 'Unnamed customer',
+  initial: (record.name || '?').slice(0, 1).toUpperCase(),
+  idLabel: `ID ${record.id || 'not recorded'}`,
+  emailLabel: record.email || 'No email recorded',
+  phoneLabel: record.phone || 'No phone recorded',
+})))
 
-function statusClass(record: CommerceCustomerRecord): string {
-  if (record.status === 'Active')
-    return 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
-  if (record.status === 'Inactive')
-    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: CommerceCustomerRecord }): 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 customers</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-user-group"></div>
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No customers found</p>
-    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native Customer 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">Customer</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Contact</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Recorded spend</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Last order</th><th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Status</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 || 'Unnamed customer' }}</Button><p class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500">ID {{ record.id || 'not recorded' }}</p></div></div></td>
-            <td class="px-4 py-3"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.email || 'No email recorded' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.phone || 'No phone recorded' }}</p></td>
-            <td class="px-4 py-3 font-medium text-gray-700 text-sm dark:text-neutral-200">{{ formatMoney(record.totalSpent) }}</td>
-            <td class="px-4 py-3 text-gray-700 text-sm dark:text-neutral-200">{{ formatDate(record.lastOrder) }}</td>
-            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record)">{{ record.status }}</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="nameLabel"
+  paginated
+  :page-size="15"
+  empty-title="No customers found"
+  empty-description="Adjust the filters or add a native Customer 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.nameLabel"></p>
+        <p class="mt-1 font-mono text-gray-400 text-xs dark:text-neutral-500" x-text="row.idLabel"></p>
+      </div>
+    </div>
+  </template>
+</Table>

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

@@ -7,7 +7,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 GiftCardIndexResponse {
   records: GiftCardRecord[]
@@ -49,8 +48,6 @@ const statusFilter = state('all')
 const enabledFilter = state('all')
 const deliveryFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const pageSize = 20
 const loading = state(true)
 const loadError = state('')
 const dialogOpen = state(false)
@@ -98,15 +95,6 @@ function filteredRecords(): GiftCardRecord[] {
     })
 }
 
-function pageCount(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / pageSize))
-}
-
-function visibleRecords(): GiftCardRecord[] {
-  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 [
@@ -140,14 +128,13 @@ function exportHref(): string {
   return `data:text/csv;charset=utf-8,${encodeURIComponent(`\uFEFF${csv}`)}`
 }
 
-effect(() => {
-  search()
-  statusFilter()
-  enabledFilter()
-  deliveryFilter()
-  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(), deliveryFilter(), sort()])
+}
 
 async function loadGiftCards(): Promise<void> {
   loading.set(true)
@@ -156,7 +143,6 @@ async function loadGiftCards(): Promise<void> {
     const data = await dashboardApi<GiftCardIndexResponse>('/api/dashboard/commerce/gift-cards')
     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('Gift cards could not be loaded.')
@@ -258,8 +244,6 @@ async function deleteGiftCard(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, pageCount)
-
 onMount(() => {
   void loadGiftCards()
 })
@@ -295,14 +279,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 gift cards</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>
 
-    <CommerceGiftCardsTable :records="visibleRecords()" :loading="loading()" @view="openDetails" @edit="openEdit" @delete="openDelete" />
+    <CommerceGiftCardsTable :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/CommerceGiftCardsTable.stx

@@ -1,94 +1,84 @@
+@import('../UI/Table')
+
 <script client>
 import type { GiftCardRecord, GiftCardStatus } from '../../../../app/Actions/Dashboard/Commerce/gift-card-records'
 import { formatCurrency } from '@stacksjs/commerce/money'
 
-const { records = [], loading = false } = defineProps<{ records: GiftCardRecord[], loading?: boolean }>()
-const emit = defineEmits<{
-  view: [record: GiftCardRecord]
-  edit: [record: GiftCardRecord]
-  delete: [record: GiftCardRecord]
-}>()
-
-function money(value: number, currency: string): string {
-  return formatCurrency(value, currency)
-}
-
-function date(value: string): string {
-  if (!value)
-    return 'No expiry'
-  const parsed = new Date(value)
-  return Number.isNaN(parsed.getTime()) ? value : parsed.toLocaleDateString()
-}
+const records = useReactiveProp('records', [] as GiftCardRecord[])
+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 statusLabel(status: GiftCardStatus): string {
   return status.charAt(0) + status.slice(1).toLowerCase()
 }
 
-function statusClass(status: GiftCardStatus): string {
-  if (status === 'ACTIVE')
-    return 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300'
-  if (status === 'USED')
-    return 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300'
-  if (status === 'EXPIRED')
-    return 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
-  return 'bg-gray-100 text-gray-600 dark:bg-neutral-700 dark:text-neutral-300'
+/**
+ * The balance is a currency column keyed on each card's own currency; the
+ * initial balance beneath it is formatted here with the same helper, since
+ * a subtitle is text.
+ */
+const COLUMNS = [
+  { key: 'code', label: 'Gift card', sortable: true, subtitleKey: 'currency', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'recipientLabel', label: 'Recipient', sortable: true, subtitleKey: 'recipientEmailLabel', class: 'text-gray-900 dark:text-white' },
+  { key: 'currentBalance', label: 'Balance', type: 'currency' as const, currencyKey: 'currency', sortable: true, subtitleKey: 'initialLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    subtitleKey: 'enabledLabel',
+    badgeClasses: {
+      ACTIVE: 'bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300',
+      USED: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
+      EXPIRED: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+    },
+  },
+  { key: 'deliveryLabel', label: 'Delivery', sortable: true, subtitleKey: 'reloadLabel', class: 'text-gray-700 dark:text-neutral-200' },
+  { key: 'expiryDate', label: 'Expiry', type: 'date' as const, sortable: true, emptyText: 'No expiry', class: 'whitespace-nowrap' },
+]
+
+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,
+  recipientLabel: record.recipientName || 'Unassigned',
+  recipientEmailLabel: record.recipientEmail || 'No recipient email',
+  initialLabel: `of ${formatCurrency(record.initialBalance, record.currency)}`,
+  statusLabel: statusLabel(record.status),
+  enabledLabel: record.isActive ? 'Enabled' : 'Disabled',
+  deliveryLabel: record.isDigital ? 'Digital' : 'Physical',
+  reloadLabel: record.isReloadable ? 'Reloadable' : 'Single use',
+})))
+
+function handleRowAction(payload: { action: string, row: GiftCardRecord }): 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 gift cards</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-gift"></div>
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No gift cards found</p>
-    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">Adjust the filters or add a native GiftCard 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">Gift card</th>
-          <th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Recipient</th>
-          <th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Balance</th>
-          <th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Status</th>
-          <th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Delivery</th>
-          <th class="px-4 py-3 font-semibold text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Expiry</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">
-              <Button variant="ghost" size="xs" @click="emit('view', record)">{{ record.code }}</Button>
-              <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.currency }}</p>
-            </td>
-            <td class="px-4 py-3">
-              <p class="text-gray-900 text-sm dark:text-white">{{ record.recipientName || 'Unassigned' }}</p>
-              <p class="mt-1 max-w-52 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.recipientEmail || 'No recipient email' }}</p>
-            </td>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ money(record.currentBalance, record.currency) }}</p>
-              <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">of {{ money(record.initialBalance, record.currency) }}</p>
-            </td>
-            <td class="px-4 py-3">
-              <span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record.status)">{{ statusLabel(record.status) }}</span>
-              <p :class="'mt-1 text-xs ' + (record.isActive ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-neutral-500')">{{ record.isActive ? 'Enabled' : 'Disabled' }}</p>
-            </td>
-            <td class="px-4 py-3">
-              <p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.isDigital ? 'Digital' : 'Physical' }}</p>
-              <p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.isReloadable ? 'Reloadable' : 'Single use' }}</p>
-            </td>
-            <td class="px-4 py-3 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ date(record.expiryDate) }}</td>
-            <td class="px-4 py-3">
-              <div class="flex gap-1 justify-end">
-                <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-02"></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-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="code"
+  paginated
+  :page-size="20"
+  empty-title="No gift cards found"
+  empty-description="Adjust the filters or add a native GiftCard record."
+  @row-action="handleRowAction"
+/>

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

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