@stacksjs/defaults 0.75.262 → 0.75.264

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { PaymentRecord } from '../../../../app/Actions/Dashboard/Commerce/payment-records'
 import { formatCurrency } from '@stacksjs/commerce/money'
@@ -6,61 +8,95 @@ const records = useReactiveProp('records', [] as PaymentRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
+/** `partiallyRefunded` and `bank_transfer` as words, each capitalized. */
 function label(value: string): string {
-  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ')
-}
-
-function money(value: number, currency: string): string {
-  return formatCurrency(value, currency)
-}
-
-function date(value: string): string {
-  const parsed = new Date(value.includes('T') ? value : value.replace(' ', 'T'))
-  return !value || Number.isNaN(parsed.getTime())
-    ? 'Unknown'
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(parsed)
+  return value.replace(/([a-z])([A-Z])/g, '$1 $2').replaceAll('_', ' ').replace(/\b\w/g, letter => letter.toUpperCase())
 }
 
-function statusClass(status: string): string {
+/**
+ * The status pill's colour, which is a tone rather than the status itself so
+ * that every status the ledger has not named still reads as pending, as the
+ * hand-rolled pill did.
+ */
+function statusTone(status: string): string {
   if (status === 'completed' || status === 'succeeded')
-    return 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40'
+    return 'settled'
   if (status === 'failed')
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40'
+    return 'failed'
   if (status === 'refunded' || status === 'partiallyRefunded')
-    return 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40'
-  return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40'
+    return 'refunded'
+  return 'pending'
+}
+
+/**
+ * Only the amount is slotted, for its refund line, whose colour says whether
+ * the refund was recorded. The rest are values with a second line, which is
+ * `subtitleKey`.
+ */
+const COLUMNS = [
+  { key: 'paymentLabel', label: 'Payment', sortable: true, subtitleKey: 'referenceLabel', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'billingLabel', label: 'Billing', sortable: true, subtitleKey: 'orderLabel' },
+  { key: 'amount', label: 'Amount', sortable: true, slotted: true },
+  // Capitalized in `label()` rather than with a class, which would reach the
+  // processor line beneath it too.
+  { key: 'methodLabel', label: 'Method', sortable: true, subtitleKey: 'processorLabel' },
+  {
+    key: 'statusTone',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'statusLabel',
+    badgeClasses: {
+      settled: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      failed: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      refunded: 'text-violet-700 dark:text-violet-300 bg-violet-50 dark:bg-violet-950/40',
+      pending: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View payment', icon: 'i-hugeicons-view' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  paymentLabel: `#${record.id}`,
+  referenceLabel: record.referenceNumber || record.transactionId || 'No reference',
+  billingLabel: record.billingEmail || 'No billing email',
+  orderLabel: record.orderId ? `Order #${record.orderId}` : 'No linked order',
+  amountLabel: formatCurrency(record.amount, record.currency),
+  refundLabel: record.refundAmount > 0 ? `Refunded ${formatCurrency(record.refundAmount, record.currency)}` : '',
+  refundMissing: record.refundAmount <= 0 && record.status === 'refunded' && !record.refundRecorded,
+  methodLabel: label(record.method),
+  processorLabel: record.cardBrand || record.cardLastFour
+    ? [record.cardBrand, record.cardLastFour].filter(Boolean).join(' · ')
+    : record.paymentProvider || 'No processor details',
+  statusTone: statusTone(record.status),
+  statusLabel: label(record.status),
+})))
+
+function handleRowAction(payload: { action: string, row: PaymentRecord }): 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 payments</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-credit-card"></span><p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No payments found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters to inspect another part of the native ledger.</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">Payment</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Billing</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Amount</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Method</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-left text-xs dark:text-neutral-300">Created</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>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">#{{ record.id }}</p><p class="mt-1 max-w-44 text-gray-400 text-xs truncate dark:text-neutral-500">{{ record.referenceNumber || record.transactionId || 'No reference' }}</p></td>
-            <td class="px-4 py-4"><p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.billingEmail || 'No billing email' }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.orderId ? 'Order #' + record.orderId : 'No linked order' }}</p></td>
-            <td class="px-4 py-4"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ money(record.amount, record.currency) }}</p><p :if="record.refundAmount > 0" class="mt-1 text-violet-600 text-xs dark:text-violet-300">Refunded {{ money(record.refundAmount, record.currency) }}</p><p :else-if="record.status === 'refunded' && !record.refundRecorded" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p></td>
-            <td class="px-4 py-4"><p class="capitalize text-gray-700 text-sm dark:text-neutral-200">{{ label(record.method) }}</p><p class="mt-1 text-gray-400 text-xs dark:text-neutral-500">{{ record.cardBrand }}<span :if="record.cardLastFour"> · {{ record.cardLastFour }}</span><span :if="!record.cardBrand && !record.cardLastFour">{{ record.paymentProvider || 'No processor details' }}</span></p></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(record.status)">{{ label(record.status) }}</span></td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ date(record.createdAt) }}</td>
-            <td class="px-4 py-4 text-right"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'View payment ' + record.id" @click="emit('view', record)"><span class="block h-4 w-4 text-blue-500 i-hugeicons-view"></span></Button></td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="id"
+  paginated
+  :page-size="25"
+  empty-title="No payments found"
+  empty-description="Adjust the filters to inspect another part of the native ledger."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.amountLabel"></p>
+    <p :if="row.refundLabel" class="mt-1 text-violet-600 text-xs dark:text-violet-300" x-text="row.refundLabel"></p>
+    <p :if="row.refundMissing" class="mt-1 text-amber-600 text-xs dark:text-amber-300">Refund amount not recorded</p>
+  </template>
+</Table>

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { TaxRateRecord } from '../../../../app/Actions/Dashboard/Commerce/tax-rate-records'
 
@@ -5,72 +7,67 @@ const records = useReactiveProp('records', [] as TaxRateRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return !value || Number.isNaN(date.getTime())
-    ? 'Unknown'
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+/**
+ * The name cell is slotted: the default, code and exemptible badges sit
+ * beside the name because each changes what a customer is charged, and the
+ * code is what application code matches on, so renaming the rate must not
+ * change the bill. Everything else is a column option.
+ */
+const COLUMNS = [
+  { key: 'name', label: 'Tax rate', sortable: true, slotted: true },
+  { key: 'rateLabel', label: 'Rate', sortable: true, searchable: false, class: 'font-medium text-gray-900 whitespace-nowrap dark:text-white' },
+  { key: 'country', label: 'Location', sortable: true, subtitleKey: 'region' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { active: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' },
+    badgeLabels: { active: 'Active', inactive: 'Inactive' },
+  },
+  { key: 'createdAt', label: 'Created', type: 'date' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+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,
+  rateLabel: `${record.rate}%`,
+  // Anything but active reads as inactive, as the hand-rolled pill did.
+  status: record.status === 'active' ? 'active' : 'inactive',
+})))
+
+function handleRowAction(payload: { action: string, row: TaxRateRecord }): 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 tax rates
-  </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-percent-circle"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No tax rates found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a TaxRate 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">Tax rate</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Rate</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Location</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-left text-xs dark:text-neutral-300">Created</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 flex-wrap gap-2 items-center">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.name }}</p>
-                <span :if="record.isDefault" class="px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">Default</span>
-                {{--
-                  Both badges change what a customer is charged, so they sit
-                  next to the name rather than in a column someone has to
-                  scroll to. The code is what application code matches on;
-                  renaming the rate must not change the bill.
-                --}}
-                <span :if="record.code" class="px-2 py-0.5 font-mono text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">{{ record.code }}</span>
-                <span :if="record.exemptible" class="px-2 py-0.5 font-medium text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 rounded-full" x-tooltip="Not charged to a customer who qualifies for an exemption" title="Not charged to a customer who qualifies for an exemption">Exemptible</span>
-              </div>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.type }}</p>
-            </td>
-            <td class="px-4 py-4 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-white">{{ record.rate }}%</td>
-            <td class="px-4 py-4">
-              <p class="text-gray-700 text-sm dark:text-neutral-200">{{ record.country }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.region }}</p>
-            </td>
-            <td class="px-4 py-4">
-              <span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (record.status === 'active' ? 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' : 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700')">{{ record.status === 'active' ? 'Active' : 'Inactive' }}</span>
-            </td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</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. Paging is what was missing, and Table brings it.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No tax rates found"
+  empty-description="Adjust the filters or add a TaxRate record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <div class="flex flex-wrap gap-2 items-center">
+      <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.name"></p>
+      <span :if="row.isDefault" class="px-2 py-0.5 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">Default</span>
+      <span :if="row.code" class="px-2 py-0.5 font-mono text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full" x-text="row.code"></span>
+      <span :if="row.exemptible" class="px-2 py-0.5 font-medium text-amber-700 text-xs dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 rounded-full" x-tooltip="Not charged to a customer who qualifies for an exemption" title="Not charged to a customer who qualifies for an exemption">Exemptible</span>
+    </div>
+    <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400" x-text="row.type"></p>
+  </template>
+</Table>

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ProductVariantRecord } from '../../../../app/Actions/Dashboard/Commerce/product-variant-records'
 
@@ -5,30 +7,72 @@ const records = useReactiveProp('records', [] as ProductVariantRecord[])
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
-function formatDate(value: string): string {
-  const date = new Date(value)
-  return !value || Number.isNaN(date.getTime()) ? 'Unknown' : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium' }).format(date)
+/**
+ * Two slotted columns, dispatched on `column.key`: the variant with its type
+ * and description beneath it, and the option pills, of which the first four
+ * show and the rest are counted.
+ */
+const COLUMNS = [
+  { key: 'variant', label: 'Variant', sortable: true, slotted: true },
+  { key: 'productName', label: 'Product', sortable: true, emptyText: 'Unassigned' },
+  { key: 'optionsLabel', label: 'Options', slotted: true, class: 'max-w-sm' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      active: 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40',
+      draft: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'createdAt', label: 'Created', type: 'date' as const, sortable: true, class: 'whitespace-nowrap' },
+]
+
+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,
+  // Searchable text for the options, and the parts the cell draws.
+  optionsLabel: record.options.join(', '),
+  shownOptions: record.options.slice(0, 4),
+  moreOptions: record.options.length > 4 ? `+${record.options.length - 4}` : '',
+})))
+
+function handleRowAction(payload: { action: string, row: ProductVariantRecord }): 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 product variants</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-layer"></span><p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No product variants found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a ProductVariant 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">Variant</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Product</th><th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Options</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-left text-xs dark:text-neutral-300">Created</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"><p class="font-medium text-gray-900 text-sm dark:text-white">{{ record.variant }}</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.type }}</p><p class="mt-2 max-w-sm text-gray-500 text-xs dark:text-neutral-400">{{ record.description }}</p></td>
-            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300">{{ record.productName || 'Unassigned' }}</td>
-            <td class="px-4 py-4 max-w-sm"><div class="flex flex-wrap gap-1"><template :for="option in record.options.slice(0, 4)" :key="option"><span class="px-2 py-0.5 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full">{{ option }}</span></template><span :if="record.options.length > 4" class="px-2 py-0.5 text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full">+{{ record.options.length - 4 }}</span><span :if="record.options.length === 0" class="text-gray-400 text-xs">No options</span></div></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (record.status === 'active' ? 'text-emerald-700 dark:text-emerald-300 bg-emerald-50 dark:bg-emerald-950/40' : record.status === 'draft' ? 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40' : 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700')">{{ record.status }}</span></td>
-            <td class="px-4 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ formatDate(record.createdAt) }}</td>
-            <td class="px-4 py-4"><div class="flex gap-1 justify-end"><Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + record.variant" @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.variant" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button></div></td>
-          </tr>
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="variant"
+  paginated
+  :page-size="25"
+  empty-title="No product variants found"
+  empty-description="Adjust the filters or add a ProductVariant record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row, column }">
+    <template :if="column.key === 'variant'">
+      <p class="font-medium text-gray-900 text-sm dark:text-white" x-text="row.variant"></p>
+      <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400" x-text="row.type"></p>
+      <p class="mt-2 max-w-sm text-gray-500 text-xs dark:text-neutral-400" x-text="row.description"></p>
+    </template>
+    <template :else>
+      <div class="flex flex-wrap gap-1">
+        <template :for="option in row.shownOptions" :key="option">
+          <span class="px-2 py-0.5 text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-full" x-text="option"></span>
         </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+        <span :if="row.moreOptions" class="px-2 py-0.5 text-gray-600 text-xs dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700 rounded-full" x-text="row.moreOptions"></span>
+        <span :if="row.shownOptions.length === 0" class="text-gray-400 text-xs">No options</span>
+      </div>
+    </template>
+  </template>
+</Table>

package/resources/components/Dashboard/Content/BlogDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script server>
 import { publicApplicationUrl } from '../../../../functions/public-application-url'
 
@@ -102,57 +104,47 @@ defineClientPayload({ blogUrl })
       </div>
 
       <div x-show="!isLoading() && !loadError() && filteredPosts().length > 0" class="overflow-x-auto max-w-full w-full">
-        <table class="min-w-full text-sm divide-neutral-200 divide-y dark:divide-neutral-800">
-          <thead class="font-semibold text-left text-neutral-600 text-xs uppercase dark:text-neutral-300 bg-neutral-50 dark:bg-neutral-950/60">
-            <tr>
-              <th scope="col" class="px-4 py-3">Post</th>
-              <th scope="col" class="px-4 py-3">Status</th>
-              <th scope="col" class="px-4 py-3">Date</th>
-              <th scope="col" class="px-4 py-3">Length</th>
-              <th scope="col" class="px-4 py-3"><span class="sr-only">Actions</span></th>
-            </tr>
-          </thead>
-          <tbody class="divide-neutral-200 divide-y dark:divide-neutral-800">
-            <template :for="post in filteredPosts">
-              <tr class="hover:bg-neutral-50 dark:hover:bg-neutral-950/60">
-                <td class="px-4 py-3">
-                  <div class="flex gap-2 items-center">
-                    <span class="font-medium">{{ post.title }}</span>
-                    <span x-show="post.featured" class="inline-flex px-1.5 py-0.5 font-medium text-[11px] text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/40 rounded">Featured</span>
-                  </div>
-                  <div class="mt-1 max-w-xl text-neutral-500 text-xs truncate dark:text-neutral-400">{{ post.description || post.slug }}</div>
-                </td>
-                <td class="px-4 py-3">
-                  <span :class="statusClass(post.draft)" class="inline-flex px-2 py-0.5 font-medium text-xs rounded-full">
-                    {{ post.draft ? 'Draft' : 'Published' }}
-                  </span>
-                </td>
-                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ formatDate(post.date) }}</td>
-                <td class="px-4 py-3 text-neutral-600 dark:text-neutral-300">{{ post.readingTime }} min read</td>
-                <td class="px-4 py-3">
-                  <div class="flex gap-1 justify-end">
-                    <a
-                      x-show="!post.draft"
-                      :href="publicPostUrl(post.slug)"
-                      target="_blank"
-                      rel="noopener"
-                      :title="'View ' + post.title"
-                      class="p-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
-                    >
-                      <span class="block h-4 w-4 i-hugeicons-view"></span>
-                    </a>
-                    <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + post.title" @click="openEditor(post)">
-                      <span class="block h-4 w-4 i-hugeicons-edit-01"></span>
-                    </Button>
-                    <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + post.title" @click="askDelete(post)">
-                      <span class="block h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-waste"></span>
-                    </Button>
-                  </div>
-                </td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
+        {{--
+          The page owns the search, the status filter and the loading, error
+          and empty states, so the table brings only sorting and paging. The
+          post is slotted for its featured mark; the actions are a slot for the
+          view link, which only a published post has.
+        --}}
+        <Table
+          :columns="POST_COLUMNS"
+          :data="postRows()"
+          row-key="slug"
+          paginated
+          :page-size="25"
+        >
+          <template #cell="{ row }">
+            <div class="flex gap-2 items-center">
+              <span class="font-medium" x-text="row.title"></span>
+              <span :if="row.featured" class="inline-flex px-1.5 py-0.5 font-medium text-[11px] text-blue-700 dark:text-blue-300 bg-blue-100 dark:bg-blue-900/40 rounded">Featured</span>
+            </div>
+            <div class="mt-1 max-w-xl text-neutral-500 text-xs truncate dark:text-neutral-400" x-text="row.summary"></div>
+          </template>
+          <template #actions="{ row }">
+            <div class="flex gap-1 justify-end">
+              <a
+                :if="!row.draft"
+                :href="row.publicUrl"
+                target="_blank"
+                rel="noopener"
+                :title="'View ' + row.title"
+                class="p-2 text-neutral-600 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded"
+              >
+                <span class="block h-4 w-4 i-hugeicons-view"></span>
+              </a>
+              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit ' + row.title" @click="openEditor(row.post)">
+                <span class="block h-4 w-4 i-hugeicons-edit-01"></span>
+              </Button>
+              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete ' + row.title" @click="askDelete(row.post)">
+                <span class="block h-4 w-4 text-red-600 dark:text-red-400 i-hugeicons-waste"></span>
+              </Button>
+            </div>
+          </template>
+        </Table>
       </div>
 
       <!-- Empty: distinguishes "no posts yet" from "nothing matched the filter". -->
@@ -272,22 +264,36 @@ const filteredPosts = derived(() => {
   })
 })
 
-function statusClass(draft: boolean) {
-  return draft
-    ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200'
-    : 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200'
-}
-
-function formatDate(value: string | number | Date | null | undefined) {
-  if (!value)
-    return 'No date'
-
-  const date = new Date(value)
-
-  return Number.isNaN(date.getTime())
-    ? value
-    : date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
-}
+const POST_COLUMNS = [
+  { key: 'title', label: 'Post', sortable: true, slotted: true },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      draft: 'bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200',
+      published: 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-200',
+    },
+    badgeLabels: { draft: 'Draft', published: 'Published' },
+  },
+  { key: 'date', label: 'Date', type: 'date' as const, sortable: true, emptyText: 'No date', class: 'text-neutral-600 dark:text-neutral-300' },
+  { key: 'lengthLabel', label: 'Length', searchable: false, class: 'text-neutral-600 dark:text-neutral-300' },
+]
+
+/** What the table reads; `post` is the record the edit and delete actions take. */
+const postRows = derived(() => filteredPosts().map(post => ({
+  slug: post.slug,
+  title: post.title,
+  featured: post.featured,
+  draft: post.draft,
+  summary: post.description || post.slug,
+  status: post.draft ? 'draft' : 'published',
+  date: post.date,
+  lengthLabel: `${post.readingTime} min read`,
+  publicUrl: publicPostUrl(post.slug),
+  post,
+})))
 
 function clearFilters() {
   searchQuery.set('')