@stacksjs/defaults 0.75.279 → 0.75.281

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

@@ -6,7 +6,6 @@ import type {
 } from '../../../../app/Actions/Dashboard/Marketing/social-post-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
 import { pushToast } from '../../../../functions/toasts'
-import { pageControls } from '../../../../functions/dashboard-list'
 
 interface SocialPostIndexResponse {
   records: SocialPostRecord[]
@@ -35,8 +34,6 @@ const statusFilter = state('all')
 const platformFilter = state('all')
 const authorFilter = state('all')
 const sort = state('newest')
-const page = state(1)
-const perPage = 10
 const dialogOpen = state(false)
 const dialogMode = state<'add' | 'edit'>('add')
 const editingRecord = state<SocialPostRecord | null>(null)
@@ -70,24 +67,14 @@ function filteredRecords(): SocialPostRecord[] {
     })
 }
 
-function visibleRecords(): SocialPostRecord[] {
-  const start = (page() - 1) * perPage
-  return filteredRecords().slice(start, start + perPage)
+/**
+ * What the table is showing: a change returns it to the first page, as this
+ * page's own pager did before the table took over paging.
+ */
+function viewKey(): string {
+  return JSON.stringify([search(), statusFilter(), platformFilter(), authorFilter(), sort()])
 }
 
-function totalPages(): number {
-  return Math.max(1, Math.ceil(filteredRecords().length / perPage))
-}
-
-effect(() => {
-  search()
-  statusFilter()
-  platformFilter()
-  authorFilter()
-  sort()
-  page.set(1)
-})
-
 async function loadPosts(): Promise<void> {
   loading.set(true)
   loadError.set('')
@@ -98,8 +85,6 @@ async function loadPosts(): Promise<void> {
     records.set(data.records)
     users.set(data.users)
     summary.set(data.summary)
-    if (page() > totalPages())
-      page.set(totalPages())
   }
   catch (error) {
     loadError.set(error instanceof Error ? error.message : String(error))
@@ -187,8 +172,6 @@ async function deletePost(): Promise<void> {
   }
 }
 
-const { previousPage, nextPage } = pageControls(page, totalPages)
-
 onMount(() => {
   void loadPosts()
 })
@@ -220,8 +203,7 @@ onMount(() => {
       <label><span class="sr-only">Filter owner</span><select x-model="authorFilter" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="all">All owners</option><option value="">Unassigned</option><template :for="user in users()" :key="user.id"><option :value="user.id">{{ user.name }}</option></template></select></label>
       <label><span class="sr-only">Sort social posts</span><select x-model="sort" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-700"><option value="newest">Newest</option><option value="scheduled">Latest schedule</option><option value="reach">Most reach</option><option value="engagement">Most engagement</option></select></label>
     </div>
-    <SocialPostsTable :records="visibleRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
-    <div :if="filteredRecords().length > perPage" class="flex items-center justify-between"><p class="text-gray-500 text-sm dark:text-neutral-400">Page {{ page() }} of {{ totalPages() }}</p><div class="flex gap-2"><Button :disabled="page() === 1" variant="secondary" @click="previousPage()">Previous</Button><Button :disabled="page() === totalPages()" variant="secondary" @click="nextPage()">Next</Button></div></div>
+    <SocialPostsTable :sort-reset-key="sort()" :page-reset-key="viewKey()" :records="filteredRecords()" :loading="loading()" @edit="openEdit" @delete="openDelete" />
   </section>
 </div>
 

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

@@ -1,79 +1,92 @@
+@import('../UI/Table')
+
 <script client>
 import type { SocialPostRecord } from '../../../../app/Actions/Dashboard/Marketing/social-post-records'
+import { parseDashboardDate } from '../../../../functions/dashboard-dates'
 
 const records = useReactiveProp('records', [] as SocialPostRecord[])
 const loading = useReactiveProp('loading', false)
+/** The parent's sort select: a change hands the order back from a header sort. */
+const sortResetKey = useReactiveProp<unknown>('sortResetKey', '')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
 function formatDate(value: string): string {
   if (!value)
     return 'Not set'
-  const timestamp = new Date(value.replace(' ', 'T')).getTime()
-  return Number.isFinite(timestamp)
-    ? new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(timestamp)
-    : value
-}
-
-function statusClass(status: string): string {
-  if (status === 'published')
-    return 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
-  if (status === 'scheduled')
-    return 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300'
-  if (status === 'failed')
-    return 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300'
-  return 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
+  const date = parseDashboardDate(value)
+  return Number.isNaN(date.getTime())
+    ? value
+    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
 }
 
 function displayPlatform(value: string): string {
   return value.charAt(0).toUpperCase() + value.slice(1)
 }
+
+/** The post cell is slotted: an image link and an external id appear only when present. */
+const COLUMNS = [
+  { key: 'content', label: 'Post', slotted: true },
+  { key: 'platformLabel', label: 'Platform', sortable: true, class: 'font-medium text-gray-700 whitespace-nowrap dark:text-neutral-200' },
+  { key: 'authorName', label: 'Owner', sortable: true, subtitleKey: 'authorEmail' },
+  { key: 'timingLabel', label: 'Timing', subtitleKey: 'timingNote', class: 'whitespace-nowrap' },
+  { key: 'reach', label: 'Performance', type: 'number' as const, sortable: true, subtitleKey: 'engagementLabel', class: 'whitespace-nowrap' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      published: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+      scheduled: 'bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300',
+      failed: 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+      draft: 'bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+    },
+  },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit social post', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete social post', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => records().map(record => ({
+  ...record,
+  platformLabel: displayPlatform(record.platform),
+  timingLabel: record.status === 'published' ? formatDate(record.publishedAt) : formatDate(record.scheduledAt),
+  timingNote: record.status === 'published' ? 'Published' : record.status === 'scheduled' ? 'Scheduled' : `Created ${formatDate(record.createdAt)}`,
+  engagementLabel: `${record.engagement.toLocaleString()} interactions`,
+})))
+
+function handleRowAction(payload: { action: string, row: SocialPostRecord }): 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 social posts</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-share-01"></span>
-    <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No social posts found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the filters or add a SocialPost 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">Post</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Platform</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Owner</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Timing</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Performance</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Status</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs dark:text-neutral-300"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="record in records()" :key="record.id">
-          <tr class="align-top">
-            <td class="px-4 py-4 max-w-md">
-              <p class="text-gray-900 text-sm dark:text-white">{{ record.content }}</p>
-              <p :if="record.imageUrl" class="mt-1 max-w-xs text-blue-600 text-xs truncate dark:text-blue-400">{{ record.imageUrl }}</p>
-              <p :if="record.externalId" class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ record.externalId }}</p>
-            </td>
-            <td class="px-4 py-4 font-medium text-gray-700 text-sm whitespace-nowrap dark:text-neutral-200">{{ displayPlatform(record.platform) }}</td>
-            <td class="px-4 py-4 text-gray-600 text-sm dark:text-neutral-300"><p>{{ record.authorName }}</p><p :if="record.authorEmail" class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.authorEmail }}</p></td>
-            <td class="px-4 py-4 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">
-              <p>{{ record.status === 'published' ? formatDate(record.publishedAt) : formatDate(record.scheduledAt) }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.status === 'published' ? 'Published' : record.status === 'scheduled' ? 'Scheduled' : 'Created ' + formatDate(record.createdAt) }}</p>
-            </td>
-            <td class="px-4 py-4 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300"><p>{{ record.reach.toLocaleString() }} reach</p><p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ record.engagement.toLocaleString() }} interactions</p></td>
-            <td class="px-4 py-4"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + statusClass(record.status)">{{ record.status }}</span></td>
-            <td class="px-4 py-4">
-              <div class="flex gap-1 justify-end">
-                <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit social post ' + record.id" @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 social post ' + record.id" @click="emit('delete', record)"><span class="block h-4 w-4 text-red-500 i-hugeicons-delete-02"></span></Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </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="id"
+  paginated
+  :page-size="10"
+  empty-title="No social posts found"
+  empty-description="Adjust the filters or add a SocialPost record."
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <div class="max-w-md">
+      <p class="text-gray-900 text-sm dark:text-white" x-text="row.content"></p>
+      <p :if="row.imageUrl" class="mt-1 max-w-xs text-blue-600 text-xs truncate dark:text-blue-400" x-text="row.imageUrl"></p>
+      <p :if="row.externalId" class="mt-1 font-mono text-gray-500 text-xs dark:text-neutral-400" x-text="row.externalId"></p>
+    </div>
+  </template>
+</Table>

package/resources/components/Dashboard/Monitoring/ErrorDashboard.stx

@@ -29,39 +29,33 @@
         <h2 class="font-semibold text-lg text-neutral-900 dark:text-white">Issues</h2>
         <div class="flex flex-col gap-3 sm:flex-row">
           <div class="w-full sm:w-64">
-            <Input v-model:value="searchQuery" ariaLabel="Search errors" placeholder="Search errors..." size="sm" @input="resetFilterPage">
+            <Input v-model:value="searchQuery" ariaLabel="Search errors" placeholder="Search errors..." size="sm">
               <template #iconLeft>
                 <div class="h-4 w-4 i-hugeicons-search-01"></div>
               </template>
             </Input>
           </div>
           <div class="w-full sm:w-40">
-            <Select v-model:value="statusFilter" :options="statusOptions" ariaLabel="Error status" placeholder="" size="sm" @change="resetFilterPage" />
+            <Select v-model:value="statusFilter" :options="statusOptions" ariaLabel="Error status" placeholder="" size="sm" />
           </div>
           <div class="w-full sm:w-40">
-            <Select v-model:value="typeFilter" :options="typeOptions" ariaLabel="Error type" placeholder="" size="sm" @change="resetFilterPage" />
+            <Select v-model:value="typeFilter" :options="typeOptions" ariaLabel="Error type" placeholder="" size="sm" />
           </div>
         </div>
       </div>
     </template>
 
     <ErrorTable
-      :errors="paginatedErrors"
+      :errors="filteredErrors"
+      :pageResetKey="viewKey"
       :emptyTitle="emptyTitle"
       :emptyDescription="emptyDescription"
-      :sortColumn="sortBy"
-      :sortDirection="sortOrder"
-      @sort="handleSort"
       @row-click="viewError"
       @resolve="handleResolveError"
       @ignore="handleIgnoreError"
       @unresolve="handleUnresolveError"
       @delete="openDeleteModal"
     />
-
-    <template #footer>
-      <Pagination :currentPage="currentPage" :totalPages="totalPages" :totalItems="totalFiltered" :itemsPerPage="itemsPerPage" showTotalItems @page="setCurrentPage" />
-    </template>
   </Card>
 
   <Modal :isOpen="isDetailModalOpen()" :title="detailTitle" size="lg" @close="closeDetailModal">
@@ -171,10 +165,6 @@ const { groupedErrors, errorStats, fetchGroupedErrors, fetchErrorStats, resolveE
 const searchQuery = state('')
 const statusFilter = state('')
 const typeFilter = state('')
-const sortBy = state('last_seen')
-const sortOrder = state<'asc' | 'desc'>('desc')
-const currentPage = state(1)
-const itemsPerPage = state(10)
 
 const selectedError = state<ErrorGroup | null>(null)
 const isDetailModalOpen = state(false)
@@ -216,8 +206,6 @@ const filteredErrors = derived(() => {
   const q = searchQuery().toLowerCase()
   const status = statusFilter()
   const type = typeFilter()
-  const sb = sortBy()
-  const so = sortOrder()
   return list
     .filter((error) => {
       const matchesSearch = !q
@@ -227,38 +215,19 @@ const filteredErrors = derived(() => {
       const matchesType = !type || error.type === type
       return matchesSearch && matchesStatus && matchesType
     })
-    .sort((a, b) => {
-      let comparison = 0
-      if (sb === 'type')
-        comparison = a.type.localeCompare(b.type)
-      else if (sb === 'count')
-        comparison = a.count - b.count
-      else if (sb === 'last_seen')
-        comparison = new Date(a.last_seen).getTime() - new Date(b.last_seen).getTime()
-      else if (sb === 'first_seen')
-        comparison = new Date(a.first_seen).getTime() - new Date(b.first_seen).getTime()
-      return so === 'asc' ? comparison : -comparison
-    })
+    // Most recently seen first: the order a header sort in the table falls back to.
+    .sort((a, b) => new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime())
 })
 
-const paginatedErrors = derived(() => {
-  const start = (currentPage() - 1) * itemsPerPage()
-  return filteredErrors().slice(start, start + itemsPerPage())
-})
+/** What the table is showing: a change to the search or a filter returns it to the first page. */
+const viewKey = derived(() => JSON.stringify([searchQuery(), statusFilter(), typeFilter()]))
 
-const totalFiltered = derived(() => filteredErrors().length)
-const totalPages = derived(() => Math.max(1, Math.ceil(filteredErrors().length / itemsPerPage())))
 
 const hasFilters = derived(() => searchQuery() !== '' || (statusFilter() ?? '') !== '' || (typeFilter() ?? '') !== '')
 const emptyTitle = derived(() => hasFilters() ? 'No matching errors' : 'No errors found')
 const emptyDescription = derived(() => hasFilters() ? 'Try adjusting your filters' : 'Your application is running smoothly!')
 
 const hasSelectedError = derived(() => selectedError() !== null)
-
-function setCurrentPage(page: number | CustomEvent<number>): void {
-  const nextPage = typeof page === 'number' ? page : page.detail
-  currentPage.set(Math.min(Math.max(1, nextPage), totalPages()))
-}
 const selectedIsUnresolved = derived(() => selectedError()?.status === 'unresolved')
 const selectedIsResolvedOrIgnored = derived(() => {
   const s = selectedError()?.status
@@ -281,16 +250,6 @@ function eventValue<T>(value: T | CustomEvent<T>): T {
   return value instanceof CustomEvent ? value.detail : value
 }
 
-function resetFilterPage(): void {
-  currentPage.set(1)
-}
-
-function handleSort(value: { column: string, direction: 'asc' | 'desc' } | CustomEvent<{ column: string, direction: 'asc' | 'desc' }>): void {
-  const sort = eventValue(value)
-  sortBy.set(sort.column)
-  sortOrder.set(sort.direction)
-}
-
 function viewError(value: ErrorGroup | CustomEvent<ErrorGroup>): void {
   const error = eventValue(value)
   selectedError.set(error)

package/resources/components/Dashboard/Monitoring/ErrorTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 interface ErrorGroup {
   id?: string | number
@@ -10,36 +12,13 @@ interface ErrorGroup {
   stack?: string | null
 }
 
-interface SortPayload {
-  column: 'type' | 'count' | 'last_seen'
-  direction: 'asc' | 'desc'
-}
-
 const errors = useReactiveProp('errors', [])
 const emptyTitle = useReactiveProp('emptyTitle', 'No errors found')
 const emptyDescription = useReactiveProp('emptyDescription', 'Your application is running smoothly!')
-const sortColumn = useReactiveProp('sortColumn', 'last_seen')
-const sortDirection = useReactiveProp('sortDirection', 'desc')
+/** The parent's search and filters: a change returns to the first page. */
+const pageResetKey = useReactiveProp<unknown>('pageResetKey', '')
 const emit = defineEmits()
 
-function rows(): ErrorGroup[] {
-  return errors() as ErrorGroup[]
-}
-
-function nextSort(column: SortPayload['column']): void {
-  const direction = sortColumn() === column && sortDirection() === 'desc' ? 'asc' : 'desc'
-  emit('sort', { column, direction })
-}
-
-function statusClass(status: string): string {
-  const classes: Record<string, string> = {
-    unresolved: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40 border-red-200 dark:border-red-900',
-    resolved: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40 border-green-200 dark:border-green-900',
-    ignored: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40 border-amber-200 dark:border-amber-900',
-  }
-  return classes[status] || 'text-neutral-700 dark:text-neutral-300 bg-neutral-50 dark:bg-neutral-800 border-neutral-200 dark:border-neutral-700'
-}
-
 function formatRelativeTime(value: string): string {
   if (!value)
     return 'Not recorded'
@@ -58,77 +37,69 @@ function formatRelativeTime(value: string): string {
   const days = Math.floor(hours / 24)
   return days < 7 ? `${days}d ago` : date.toLocaleDateString()
 }
-</script>
 
-<div class="overflow-hidden border border-stone-200/80 rounded-xl dark:border-neutral-700">
-  <div :if="rows().length === 0" class="flex flex-col items-center justify-center px-4 py-12 text-center">
-    <span class="block mb-3 h-7 w-7 text-neutral-400 i-hugeicons-inbox"></span>
-    <p class="font-medium text-neutral-700 text-sm dark:text-neutral-200">{{ emptyTitle() }}</p>
-    <p class="mt-1 text-neutral-500 text-sm dark:text-neutral-400">{{ emptyDescription() }}</p>
-  </div>
+/**
+ * Last seen reads relative to now and sorts by the timestamp behind it, so
+ * it is slotted rather than a datetime column. The parent's order, most
+ * recently seen first, is what a header sort falls back to.
+ */
+const COLUMNS = [
+  { key: 'type', label: 'Type', type: 'badge' as const, sortable: true },
+  { key: 'message', label: 'Message', class: 'max-w-lg truncate text-neutral-700 dark:text-neutral-200' },
+  { key: 'count', label: 'Count', type: 'number' as const, sortable: true, align: 'center' as const, class: 'font-semibold' },
+  {
+    key: 'status',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    align: 'center' as const,
+    badgeClasses: {
+      unresolved: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/40',
+      resolved: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/40',
+      ignored: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'last_seen', label: 'Last seen', sortable: true, align: 'right' as const, slotted: true },
+]
+
+/** Resolve and ignore an open error; reopen one that is resolved or ignored. */
+const ROW_ACTIONS = [
+  { action: 'view', label: 'View details of', icon: 'i-hugeicons-view' },
+  { action: 'resolve', label: 'Resolve', icon: 'i-hugeicons-checkmark-circle-02', class: 'text-green-500', when: { key: 'open', equals: true } },
+  { action: 'ignore', label: 'Ignore', icon: 'i-hugeicons-view-off', class: 'text-amber-500', when: { key: 'open', equals: true } },
+  { action: 'unresolve', label: 'Unresolve', icon: 'i-hugeicons-refresh', class: 'text-neutral-500', when: { key: 'open', equals: false } },
+  { action: 'delete', label: 'Delete', icon: 'i-hugeicons-delete-02', class: 'text-red-500' },
+]
+
+const rows = derived(() => (errors() as ErrorGroup[]).map((error, index) => ({
+  ...error,
+  rowId: error.id ?? `${error.type}:${error.message}:${index}`,
+  open: error.status === 'unresolved',
+  lastSeenLabel: formatRelativeTime(error.last_seen),
+  // The message, not the type: several groups share a type, and a name read out
+  // for every row of one type would not say which row it acts on.
+  actionName: `${error.type}: ${error.message}`,
+})))
+
+function handleRowAction(payload: { action: string, row: ErrorGroup }): void {
+  emit(payload.action === 'view' ? 'row-click' : payload.action, payload.row)
+}
+</script>
 
-  <div :if="rows().length > 0" class="overflow-x-auto">
-    <table class="w-full">
-      <thead class="bg-stone-50/80 dark:bg-neutral-800/50">
-        <tr>
-          <th scope="col" class="pl-5 pr-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
-            <button type="button" class="inline-flex gap-1.5 items-center hover:text-stone-700 dark:hover:text-neutral-200" @click="nextSort('type')">
-              Type
-              <span class="h-3.5 w-3.5 opacity-40 i-hugeicons-arrow-up-down"></span>
-            </button>
-          </th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-left text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Message</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-center text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
-            <button type="button" class="inline-flex gap-1.5 items-center hover:text-stone-700 dark:hover:text-neutral-200" @click="nextSort('count')">
-              Events
-              <span class="h-3.5 w-3.5 opacity-40 i-hugeicons-arrow-up-down"></span>
-            </button>
-          </th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-center text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">Status</th>
-          <th scope="col" class="px-4 py-3.5 font-semibold text-right text-stone-500 text-xs tracking-wider uppercase dark:text-neutral-400">
-            <button type="button" class="inline-flex gap-1.5 items-center hover:text-stone-700 dark:hover:text-neutral-200" @click="nextSort('last_seen')">
-              Last seen
-              <span class="h-3.5 w-3.5 opacity-40 i-hugeicons-arrow-up-down"></span>
-            </button>
-          </th>
-          <th scope="col" class="px-4 py-3.5 w-36"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-stone-100 divide-y dark:divide-neutral-700">
-        <template :for="error in rows()">
-          <tr class="hover:bg-stone-50/50 dark:hover:bg-neutral-800/50">
-            <td class="pl-5 pr-4 py-3.5">
-              <span class="inline-flex items-center px-2 py-0.5 font-medium text-neutral-700 text-xs dark:text-neutral-200 bg-neutral-100 dark:bg-neutral-700 rounded">{{ error.type }}</span>
-            </td>
-            <td class="px-4 py-3.5 max-w-lg">
-              <button type="button" class="block w-full text-left text-neutral-700 text-sm truncate dark:text-neutral-200 hover:text-blue-600 dark:hover:text-blue-400" @click="emit('row-click', error)">{{ error.message }}</button>
-            </td>
-            <td class="px-4 py-3.5 text-center">
-              <span class="inline-flex items-center justify-center px-2 py-0.5 min-w-[2rem] font-semibold text-neutral-700 text-xs dark:text-neutral-200 bg-neutral-100 dark:bg-neutral-700 rounded-full">{{ error.count }}</span>
-            </td>
-            <td class="px-4 py-3.5 text-center">
-              <span :class="'inline-flex items-center px-2 py-0.5 font-medium text-xs border rounded-full ' + statusClass(error.status)">{{ error.status }}</span>
-            </td>
-            <td class="px-4 py-3.5 text-neutral-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ formatRelativeTime(error.last_seen) }}</td>
-            <td class="px-4 py-3.5">
-              <div class="flex gap-1 items-center justify-end">
-                <Button :if="error.status === 'unresolved'" variant="success" size="sm" iconOnly ariaLabel="Resolve error" @click="emit('resolve', error)">
-                  <span class="block h-4 w-4 i-hugeicons-checkmark-circle-02"></span>
-                </Button>
-                <Button :if="error.status === 'unresolved'" variant="warning" size="sm" iconOnly ariaLabel="Ignore error" @click="emit('ignore', error)">
-                  <span class="block h-4 w-4 i-hugeicons-view-off"></span>
-                </Button>
-                <Button :if="error.status !== 'unresolved'" variant="secondary" size="sm" iconOnly ariaLabel="Unresolve error" @click="emit('unresolve', error)">
-                  <span class="block h-4 w-4 i-hugeicons-refresh"></span>
-                </Button>
-                <Button variant="danger" size="sm" iconOnly ariaLabel="Delete error" @click="emit('delete', error)">
-                  <span class="block h-4 w-4 i-hugeicons-delete-02"></span>
-                </Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+<Table
+  :page-reset-key="pageResetKey()"
+  :columns="COLUMNS"
+  :data="rows()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="actionName"
+  row-key="rowId"
+  paginated
+  :page-size="10"
+  :empty-title="emptyTitle()"
+  :empty-description="emptyDescription()"
+  @row-action="handleRowAction"
+>
+  <template #cell="{ row }">
+    <span class="text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400" x-text="row.lastSeenLabel"></span>
+  </template>
+</Table>