@stacksjs/defaults 0.75.263 → 0.75.266

package/resources/components/Dashboard/Infrastructure/DnsDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type {
   DashboardDnsDomain,
@@ -61,10 +63,40 @@ function typeColor(type: string): string {
   return 'bg-rose-500'
 }
 
+const TYPE_BADGE = 'font-mono font-semibold text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40'
+
+const COLUMNS = [
+  {
+    key: 'type',
+    label: 'Type',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: { A: TYPE_BADGE, AAAA: TYPE_BADGE, CNAME: TYPE_BADGE, MX: TYPE_BADGE, TXT: TYPE_BADGE },
+  },
+  { key: 'name', label: 'Name', sortable: true, class: 'font-mono text-neutral-900 whitespace-nowrap dark:text-white' },
+  { key: 'value', label: 'Value', sortable: true, emptyText: 'Not set', class: 'max-w-md font-mono truncate' },
+  { key: 'ttlLabel', label: 'TTL', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'inspect', label: 'Inspect', icon: 'i-hugeicons-view' },
+]
+
+const recordRows = derived(() => filteredRecords().map((record, index) => ({
+  ...record,
+  rowId: `${record.type}:${record.name}:${index}`,
+  ttlLabel: ttlLabel(record),
+})))
+
 function inspectRecord(record: DashboardDnsRecord): void {
   selectedRecord.set(record)
 }
 
+function handleRowAction(payload: { action: string, row: DashboardDnsRecord }): void {
+  if (payload.action === 'inspect')
+    inspectRecord(payload.row)
+}
+
 function closeRecord(): void {
   selectedRecord.set(null)
 }
@@ -202,34 +234,20 @@ onMount(() => {
       </div>
     </div>
 
-    <div :if="loading()" class="flex items-center justify-center mt-4 py-16 text-neutral-500 text-sm dark:text-neutral-400 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <span class="mr-2 h-5 w-5 animate-spin i-hugeicons-loading-03"></span>
-      Loading DNS configuration...
-    </div>
-
-    <EmptyState :if="!loading() && !loadError() && filteredRecords().length === 0" icon="i-hugeicons-internet" :title="records().length ? 'No matching DNS records' : 'No DNS records configured'" :description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'" />
-
-    <div :if="!loading() && filteredRecords().length > 0" class="overflow-x-auto mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
-      <table class="min-w-full divide-neutral-200 divide-y dark:divide-neutral-700">
-        <thead class="bg-neutral-50 dark:bg-neutral-800/70">
-          <tr>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Type</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Name</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">Value</th>
-            <th scope="col" class="px-5 py-3 font-semibold text-left text-neutral-500 text-xs uppercase dark:text-neutral-400">TTL</th>
-            <th scope="col" class="px-5 py-3"><span class="sr-only">Actions</span></th>
-          </tr>
-        </thead>
-        <tbody class="divide-neutral-100 divide-y dark:divide-neutral-800">
-          <tr :for="record in filteredRecords()" class="hover:bg-neutral-50 dark:hover:bg-neutral-800/50">
-            <td class="px-5 py-4"><span class="inline-flex px-2 py-1 font-mono font-semibold text-blue-700 text-xs dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40 rounded-md">{{ record.type }}</span></td>
-            <td class="px-5 py-4 font-mono text-neutral-900 text-sm whitespace-nowrap dark:text-white">{{ record.name }}</td>
-            <td class="px-5 py-4 max-w-md font-mono text-neutral-500 text-sm truncate dark:text-neutral-400">{{ record.value || 'Not set' }}</td>
-            <td class="px-5 py-4 text-neutral-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ ttlLabel(record) }}</td>
-            <td class="px-5 py-4 text-right"><Button variant="ghost" size="sm" @click="inspectRecord(record)">Inspect</Button></td>
-          </tr>
-        </tbody>
-      </table>
+    <div class="mt-4 bg-white dark:bg-neutral-900 border border-neutral-200 rounded-xl dark:border-neutral-700">
+      <Table
+        :columns="COLUMNS"
+        :data="recordRows()"
+        :loading="loading()"
+        :row-actions="ROW_ACTIONS"
+        action-label-key="name"
+        row-key="rowId"
+        paginated
+        :page-size="25"
+        :empty-title="records().length ? 'No matching DNS records' : 'No DNS records configured'"
+        :empty-description="records().length ? 'Adjust the search or record type filter.' : 'Add records to config/dns.ts, then refresh this page.'"
+        @row-action="handleRowAction"
+      />
     </div>
   </section>
 

package/resources/components/Dashboard/Operations/RecoveryPointTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { RecoveryPoint, RecoveryPolicy } from '../../../../functions/operations'
 
@@ -6,17 +8,8 @@ const policyItems = useReactiveProp('policies', [])
 const busyId = useReactiveProp('busyId', '')
 const emit = defineEmits()
 
-function points(): RecoveryPoint[] { return pointItems() as RecoveryPoint[] }
-function policies(): RecoveryPolicy[] { return policyItems() as RecoveryPolicy[] }
-
 function policyName(id?: string): string {
-  return policies().find(policy => policy.id === id)?.name || 'Manual recovery point'
-}
-
-function formatDate(value?: string): string {
-  if (!value) return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime()) ? value : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
+  return (policyItems() as RecoveryPolicy[]).find(policy => policy.id === id)?.name || 'Manual recovery point'
 }
 
 function formatBytes(value: number): string {
@@ -26,57 +19,75 @@ function formatBytes(value: number): string {
   return `${(value / 1024 ** index).toFixed(index === 0 ? 0 : 1)} ${units[index]}`
 }
 
-function verificationVariant(state: RecoveryPoint['verificationState']): 'default' | 'primary' | 'success' | 'warning' | 'danger' {
-  if (state === 'verified') return 'success'
-  if (state === 'corrupt' || state === 'failed') return 'danger'
-  if (state === 'verifying') return 'primary'
-  return 'warning'
+/** The pill's colour: verified, failed in either way, in progress, or not yet. */
+function verificationTone(state: RecoveryPoint['verificationState']): string {
+  if (state === 'verified') return 'verified'
+  if (state === 'corrupt' || state === 'failed') return 'failed'
+  if (state === 'verifying') return 'verifying'
+  return 'unverified'
 }
+
+/** Protection is slotted, for its two independent badges. */
+const COLUMNS = [
+  { key: 'policyName', label: 'Recovery point', sortable: true, subtitleKey: 'detail', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'pointInTime', label: 'Created', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+  {
+    key: 'verificationTone',
+    label: 'Verification',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'verificationState',
+    badgeClasses: {
+      verified: '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',
+      verifying: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+      unverified: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+  },
+  { key: 'protection', label: 'Protection', slotted: true, searchable: false },
+]
+
+const rows = derived(() => (pointItems() as RecoveryPoint[]).map(point => ({
+  ...point,
+  policyName: policyName(point.policyId),
+  detail: `${point.id} · ${point.kind} · ${formatBytes(point.sizeBytes)}`,
+  verificationTone: verificationTone(point.verificationState),
+  protection: [point.pinned ? 'Pinned' : '', point.held ? 'Held' : ''].filter(Boolean).join(', ') || 'Retention policy',
+})))
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
-  <div :if="points().length === 0" class="px-5 py-14 text-center">
-    <span aria-hidden="true" class="block mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-database-restore"></span>
-    <p class="font-semibold text-gray-900 dark:text-white">No recovery points yet</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create and run a recovery policy to produce the first independently verifiable point.</p>
-  </div>
-  <div :if="points().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-700/50">
-        <tr>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Recovery point</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Created</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Verification</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Protection</th>
-          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="point in points()">
-          <tr>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ policyName(point.policyId) }}</p>
-              <p class="mt-0.5 font-mono text-gray-500 text-xs dark:text-neutral-400">{{ point.id }} · {{ point.kind }} · {{ formatBytes(point.sizeBytes) }}</p>
-            </td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(point.pointInTime) }}</td>
-            <td class="px-4 py-3"><Badge :variant="verificationVariant(point.verificationState)" dot>{{ point.verificationState }}</Badge></td>
-            <td class="px-4 py-3">
-              <div class="flex flex-wrap gap-1.5">
-                <Badge :if="point.pinned" variant="primary">Pinned</Badge>
-                <Badge :if="point.held" variant="warning">Held</Badge>
-                <span :if="!point.pinned && !point.held" class="text-gray-500 text-xs dark:text-neutral-400">Retention policy</span>
-              </div>
-            </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <div class="inline-flex gap-2 items-center">
-                <Button size="sm" :disabled="busyId() !== '' || point.status !== 'available'" :loading="busyId() === point.id + ':verify'" @click="emit('verify', point.id)">Verify</Button>
-                <Button size="sm" variant="outline" :disabled="busyId() !== '' || point.status !== 'available' || point.verificationState !== 'verified'" @click="emit('restore', point)">Restore</Button>
-                <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === point.id + ':protect'" @click="emit('protect', { id: point.id, pinned: !point.pinned })">{{ point.pinned ? 'Unpin' : 'Pin' }}</Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  The actions are a slot: text buttons whose disabled and loading state
+  depends on the row and on which request is in flight.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  paginated
+  :page-size="25"
+  empty-title="No recovery points yet"
+  empty-description="Create and run a recovery policy to produce the first independently verifiable point."
+>
+  <template #cell="{ row }">
+    <div class="flex flex-wrap gap-1.5">
+      {{-- A directive on a component inside a slot is not evaluated, so each
+           conditional component sits in a template that carries it. --}}
+      <template :if="row.pinned"><Badge variant="primary">Pinned</Badge></template>
+      <template :if="row.held"><Badge variant="warning">Held</Badge></template>
+      <span :if="!row.pinned && !row.held" class="text-gray-500 text-xs dark:text-neutral-400">Retention policy</span>
+    </div>
+  </template>
+
+  <template #actions="{ row }">
+    <div class="inline-flex gap-2 items-center justify-end w-full whitespace-nowrap">
+      <Button size="sm" :disabled="busyId() !== '' || row.status !== 'available'" :loading="busyId() === row.id + ':verify'" @click="emit('verify', row.id)">Verify</Button>
+      <Button size="sm" variant="outline" :disabled="busyId() !== '' || row.status !== 'available' || row.verificationState !== 'verified'" @click="emit('restore', row)">Restore</Button>
+      <template :if="row.pinned">
+        <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === row.id + ':protect'" @click="emit('protect', { id: row.id, pinned: false })">Unpin</Button>
+      </template>
+      <template :else>
+        <Button size="sm" variant="ghost" :disabled="busyId() !== ''" :loading="busyId() === row.id + ':protect'" @click="emit('protect', { id: row.id, pinned: true })">Pin</Button>
+      </template>
+    </div>
+  </template>
+</Table>

package/resources/components/Dashboard/Operations/SchedulerTaskTable.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { SchedulerTask } from '../../../../functions/operations'
 
@@ -6,76 +8,78 @@ const loading = useReactiveProp('loading', false)
 const busyTask = useReactiveProp('busyTask', '')
 const emit = defineEmits()
 
-function rows(): SchedulerTask[] {
-  return tasks() as SchedulerTask[]
-}
+const COLUMNS = [
+  { key: 'name', label: 'Task', sortable: true, subtitleKey: 'timezone', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'pattern', label: 'Schedule', emptyText: 'Not configured', class: 'font-mono whitespace-nowrap' },
+  { key: 'nextRun', label: 'Next run', type: 'datetime' as const, sortable: true, emptyText: 'Not scheduled', class: 'whitespace-nowrap' },
+  {
+    key: 'state',
+    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',
+      paused: 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/40',
+    },
+    badgeLabels: { active: 'Active', paused: 'Paused' },
+  },
+]
 
-function formatDate(value: string | null): string {
-  if (!value)
-    return 'Not scheduled'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
+const rows = derived(() => (tasks() as SchedulerTask[]).map(task => ({
+  ...task,
+  state: task.enabled ? 'active' : 'paused',
+})))
 </script>
 
-<div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-xl dark:border-neutral-700">
-  <div :if="loading()" class="px-5 py-14 text-center text-gray-500 text-sm dark:text-neutral-400">
-    Loading scheduled tasks
-  </div>
-  <div :if="!loading() && rows().length === 0" class="px-5 py-14 text-center">
-    <span aria-hidden="true" class="block mb-3 mx-auto h-9 w-9 text-gray-400 i-hugeicons-calendar-03"></span>
-    <p class="font-semibold text-gray-900 dark:text-white">No scheduled tasks registered</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a rate to an app job or register a task in app/Scheduler.ts.</p>
-  </div>
-  <div :if="rows().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-700/50">
-        <tr>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Task</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Schedule</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Next run</th>
-          <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-          <th class="px-4 py-3"><span class="sr-only">Actions</span></th>
-        </tr>
-      </thead>
-      <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-        <template :for="task in rows()">
-          <tr>
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ task.name }}</p>
-              <p class="mt-0.5 text-gray-500 text-xs dark:text-neutral-400">{{ task.timezone }}</p>
-            </td>
-            <td class="px-4 py-3 font-mono text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ task.pattern || 'Not configured' }}</td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(task.nextRun) }}</td>
-            <td class="px-4 py-3">
-              <Badge :variant="task.enabled ? 'success' : 'warning'" dot>{{ task.enabled ? 'Active' : 'Paused' }}</Badge>
-            </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <div class="inline-flex gap-2 items-center">
-                <Button
-                  size="sm"
-                  :disabled="busyTask() !== '' || !task.enabled"
-                  :loading="busyTask() === task.name + ':run'"
-                  @click="emit('run', task.name)"
-                >
-                  Run now
-                </Button>
-                <Button
-                  size="sm"
-                  variant="outline"
-                  :disabled="busyTask() !== ''"
-                  :loading="busyTask() === task.name + ':toggle'"
-                  @click="emit('toggle', { name: task.name, enabled: !task.enabled })"
-                >
-                  {{ task.enabled ? 'Pause' : 'Resume' }}
-                </Button>
-              </div>
-            </td>
-          </tr>
-        </template>
-      </tbody>
-    </table>
-  </div>
-</div>
+{{--
+  The actions are a slot rather than declared row actions: they are text
+  buttons whose disabled and loading state depends on which request is in
+  flight, not icons.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  row-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No scheduled tasks registered"
+  empty-description="Add a rate to an app job or register a task in app/Scheduler.ts."
+>
+  <template #actions="{ row }">
+    <div class="inline-flex gap-2 items-center justify-end w-full whitespace-nowrap">
+      <Button
+        size="sm"
+        :disabled="busyTask() !== '' || !row.enabled"
+        :loading="busyTask() === row.name + ':run'"
+        @click="emit('run', row.name)"
+      >
+        Run now
+      </Button>
+      {{-- Two buttons rather than one with a computed label: the label is
+           the Button's slot content, which a binding on Button cannot set. --}}
+      <template :if="row.enabled">
+        <Button
+          size="sm"
+          variant="outline"
+          :disabled="busyTask() !== ''"
+          :loading="busyTask() === row.name + ':toggle'"
+          @click="emit('toggle', { name: row.name, enabled: false })"
+        >
+          Pause
+        </Button>
+      </template>
+      <template :else>
+        <Button
+          size="sm"
+          variant="outline"
+          :disabled="busyTask() !== ''"
+          :loading="busyTask() === row.name + ':toggle'"
+          @click="emit('toggle', { name: row.name, enabled: true })"
+        >
+          Resume
+        </Button>
+      </template>
+    </div>
+  </template>
+</Table>

package/resources/components/Dashboard/Queue/QueueDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { QueueAggregateStats, QueueBucket, QueueWorker } from '../../../../functions/queue'
 import { fetchQueueStats, fetchQueueWorkers, retryQueueFailures } from '../../../../functions/queue'
@@ -29,14 +31,27 @@ function workerRows(): QueueWorker[] {
   return workers()
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const date = new Date(value)
-  return Number.isNaN(date.getTime())
-    ? value
-    : new Intl.DateTimeFormat(undefined, { dateStyle: 'medium', timeStyle: 'short' }).format(date)
-}
+const count = (key: string, label: string) => ({ key, label, type: 'number' as const, align: 'right' as const, sortable: true, searchable: false, class: 'text-gray-500 dark:text-neutral-300' })
+
+const QUEUE_COLUMNS = [
+  { key: 'name', label: 'Queue', sortable: true, subtitleKey: 'status', class: 'font-medium text-gray-900 dark:text-white' },
+  count('pending', 'Pending'),
+  count('active', 'Active'),
+  count('completed', 'Completed'),
+  count('failed', 'Failed'),
+  { ...count('total', 'Total'), class: 'font-medium text-gray-900 dark:text-white' },
+]
+
+const WORKER_COLUMNS = [
+  { key: 'name', label: 'Worker', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'queuesLabel', label: 'Queues', sortable: true, class: 'text-gray-500 dark:text-neutral-300' },
+  { key: 'status', label: 'Status', sortable: true, class: 'text-gray-500 dark:text-neutral-300' },
+  count('jobs_processed', 'Processed'),
+  count('failed_jobs', 'Failed'),
+  { key: 'last_heartbeat', label: 'Last heartbeat', type: 'datetime' as const, align: 'right' as const, sortable: true, emptyText: 'Not recorded', class: 'text-gray-500 dark:text-neutral-300' },
+]
+
+const workerTableRows = derived(() => workerRows().map(worker => ({ ...worker, queuesLabel: worker.queues.join(', ') })))
 
 async function loadQueue(): Promise<void> {
   isLoading.set(true)
@@ -129,34 +144,8 @@ onMount(() => {
       <p class="font-semibold text-gray-900 dark:text-white">No queues have recorded jobs</p>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Dispatch a job to populate queue metrics.</p>
     </div>
-    <div :if="queueRows().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-700/50">
-          <tr>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Queue</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Pending</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Active</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Completed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Failed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Total</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="queue in queueRows()">
-            <tr>
-              <td class="px-4 py-3">
-                <p class="font-medium text-gray-900 text-sm dark:text-white">{{ queue.name }}</p>
-                <p class="text-gray-500 text-xs dark:text-neutral-400">{{ queue.status }}</p>
-              </td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.pending }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.active }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.completed }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ queue.failed }}</td>
-              <td class="px-4 py-3 font-medium text-gray-900 text-right text-sm dark:text-white">{{ queue.total }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
+    <div :if="queueRows().length > 0">
+      <Table :columns="QUEUE_COLUMNS" :data="queueRows()" row-key="name" paginated :page-size="25" />
     </div>
   </section>
 
@@ -175,31 +164,8 @@ onMount(() => {
       <p class="font-semibold text-gray-900 dark:text-white">No workers tracked in this process</p>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Start a queue worker to populate heartbeat and processing metrics.</p>
     </div>
-    <div :if="workerRows().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-700/50">
-          <tr>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Worker</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Queues</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Status</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Processed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Failed</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-right text-xs uppercase dark:text-neutral-300">Last heartbeat</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="worker in workerRows()">
-            <tr>
-              <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ worker.name }}</td>
-              <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ worker.queues.join(', ') }}</td>
-              <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ worker.status }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(worker.jobs_processed) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatNumber(worker.failed_jobs) }}</td>
-              <td class="px-4 py-3 text-gray-500 text-right text-sm dark:text-neutral-300">{{ formatDate(worker.last_heartbeat) }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
+    <div :if="workerRows().length > 0">
+      <Table :columns="WORKER_COLUMNS" :data="workerTableRows()" row-key="name" paginated :page-size="25" />
     </div>
   </section>
 </div>