@stacksjs/defaults 0.75.242 → 0.75.243

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ProductWaitlistOptions, ProductWaitlistRecord } from '../../../../app/Actions/Dashboard/Commerce/product-waitlist-records'
 
@@ -9,73 +11,59 @@ const options = useReactiveProp('options', {
 const loading = useReactiveProp('loading', false)
 const emit = defineEmits()
 
-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' }).format(date)
+const STATUS_CLASSES = {
+  purchased: 'text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950/30',
+  notified: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30',
+  waiting: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30',
 }
 
+const COLUMNS = [
+  { key: 'name', label: 'Customer', sortable: true, emptyText: 'Unnamed', subtitleKey: 'contact', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'productName', label: 'Product', sortable: true },
+  { key: 'quantity', label: 'Quantity', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+  { key: 'status', label: 'Status', type: 'badge' as const, sortable: true, badgeClasses: STATUS_CLASSES, emptyText: 'unknown' },
+  { key: 'notificationPreference', label: 'Preference', sortable: true, emptyText: 'Not recorded', class: 'capitalize' },
+  { key: 'createdAt', label: 'Created', type: 'date' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
+
+const ROW_ACTIONS = [
+  { action: 'edit', label: 'Edit waitlist entry for', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete waitlist entry for', icon: 'i-hugeicons-waste', class: 'text-red-500' },
+]
+
 function productLabel(productId: string): string {
   return options().products.find(option => option.id === productId)?.label || (productId ? `Product ${productId}` : 'Not linked')
 }
 
-function statusClass(value: string): string {
-  if (value === 'purchased')
-    return 'text-purple-700 dark:text-purple-300 bg-purple-50 dark:bg-purple-950/30'
-  if (value === 'notified')
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30'
-  if (value === 'waiting')
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30'
-  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
+/**
+ * `contact` and `productName` are computed per row because a column reads a
+ * field: the contact line falls back through email then phone, and the product
+ * name is looked up in the options the parent passed.
+ */
+const rows = derived(() => records().map(entry => ({
+  ...entry,
+  contact: entry.email || entry.phone || 'No contact recorded',
+  productName: productLabel(entry.productId),
+})))
+
+function handleRowAction(payload: { action: string, row: ProductWaitlistRecord }): 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 p-8 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 waitlist records
-  </div>
-  <div :else-if="records().length === 0" class="p-8 text-center">
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No product waitlist records found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add an entry 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">Customer</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Product</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Quantity</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">Preference</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Created</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="entry in records()" :key="entry.id">
-          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/50">
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ entry.name || 'Unnamed' }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ entry.email || entry.phone || 'No contact recorded' }}</p>
-            </td>
-            <td class="px-4 py-3 text-gray-700 text-sm dark:text-neutral-200">{{ productLabel(entry.productId) }}</td>
-            <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ entry.quantity }}</td>
-            <td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(entry.status)">{{ entry.status || 'unknown' }}</span></td>
-            <td class="px-4 py-3 capitalize text-gray-600 text-sm dark:text-neutral-300">{{ entry.notificationPreference || 'Not recorded' }}</td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(entry.createdAt) }}</td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Edit waitlist entry for ' + (entry.name || 'customer')" @click="emit('edit', entry)">
-                <span class="block h-4 w-4 text-blue-500 i-hugeicons-edit-01"></span>
-              </Button>
-              <Button variant="ghost" size="sm" iconOnly :ariaLabel="'Delete waitlist entry for ' + (entry.name || 'customer')" @click="emit('delete', entry)">
-                <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. Paging is what was missing.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  paginated
+  :page-size="25"
+  empty-title="No product waitlist records found"
+  empty-description="Add an entry or adjust the current filters."
+  @row-action="handleRowAction"
+/>

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

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import {
   restaurantWaitlistTimestamp,
@@ -9,9 +11,38 @@ const loading = useReactiveProp('loading', false)
 const busyId = useReactiveProp('busyId', '')
 const emit = defineEmits()
 
+const STATUS_CLASSES = {
+  seated: 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30',
+  waiting: 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30',
+  no_show: 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/30',
+}
+
+const COLUMNS = [
+  { key: 'name', label: 'Party', sortable: true, emptyText: 'Unnamed party', subtitleKey: 'contact', class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'partySize', label: 'Size', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+  // `no_show` renders as "No show" from the badge's own humanising, so no
+  // label map is needed for it.
+  { key: 'status', label: 'Status', type: 'badge' as const, sortable: true, badgeClasses: STATUS_CLASSES },
+  { key: 'quotedWait', label: 'Quoted wait', sortable: true, align: 'right' as const, class: 'font-mono' },
+  { key: 'preference', label: 'Preference', sortable: true, class: 'capitalize' },
+  { key: 'checkIn', label: 'Check in', sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
+
+/**
+ * Seating and marking a no-show only apply while the party is still waiting,
+ * which is what `when` expresses. All four are disabled on the row whose write
+ * is in flight, via `busy-key`/`busy-value`.
+ */
+const ROW_ACTIONS = [
+  { action: 'seat', label: 'Seat party for', icon: 'i-hugeicons-checkmark-circle-02', class: 'text-green-600 dark:text-green-300', when: { key: 'status', equals: 'waiting' } },
+  { action: 'no-show', label: 'Mark no show for', icon: 'i-hugeicons-user-remove-01', class: 'text-red-600 dark:text-red-300', when: { key: 'status', equals: 'waiting' } },
+  { action: 'edit', label: 'Edit restaurant waitlist entry for', icon: 'i-hugeicons-edit-01' },
+  { action: 'delete', label: 'Delete restaurant waitlist entry for', icon: 'i-hugeicons-waste', class: 'text-red-600 dark:text-red-300' },
+]
+
 function formatDateTime(value: string): string {
   if (!value)
-    return 'Not recorded'
+    return ''
   const timestamp = restaurantWaitlistTimestamp(value)
   if (!timestamp)
     return value
@@ -22,79 +53,43 @@ function formatDateTime(value: string): string {
 }
 
 function preferenceLabel(value: string): string {
-  return value === 'no_preference'
-    ? 'No preference'
-    : value.replaceAll('_', ' ')
+  return value === 'no_preference' ? 'No preference' : value.replaceAll('_', ' ')
 }
 
-function statusLabel(value: string): string {
-  return value.replaceAll('_', ' ')
-}
+/**
+ * Computed per row because a column reads a field. `checkIn` keeps this
+ * component's own parser - a restaurant check-in is stored as a unix
+ * timestamp, which `UI/Table`'s `datetime` type does not read - and the
+ * quoted wait carries its unit.
+ */
+const rows = derived(() => records().map(entry => ({
+  ...entry,
+  contact: entry.phone || entry.email || 'No contact recorded',
+  quotedWait: `${entry.quotedWaitTime} min`,
+  preference: preferenceLabel(entry.tablePreference),
+  checkIn: formatDateTime(entry.checkInTime),
+})))
 
-function statusClass(value: string): string {
-  if (value === 'seated')
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30'
-  if (value === 'waiting')
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30'
-  if (value === 'no_show')
-    return 'text-red-700 dark:text-red-300 bg-red-50 dark:bg-red-950/30'
-  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
+function handleRowAction(payload: { action: string, row: RestaurantWaitlistRecord }): 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 p-8 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 restaurant waitlist
-  </div>
-  <div :else-if="records().length === 0" class="p-8 text-center">
-    <p class="font-medium text-gray-900 text-sm dark:text-white">No restaurant waitlist records found</p>
-    <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Add a party 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">Party</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Size</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-right text-xs uppercase dark:text-neutral-400">Quoted wait</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Preference</th>
-          <th scope="col" class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Check in</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="entry in records()" :key="entry.id">
-          <tr class="hover:bg-gray-50/60 dark:hover:bg-neutral-700/50">
-            <td class="px-4 py-3">
-              <p class="font-medium text-gray-900 text-sm dark:text-white">{{ entry.name || 'Unnamed party' }}</p>
-              <p class="mt-1 text-gray-500 text-xs dark:text-neutral-400">{{ entry.phone || entry.email || 'No contact recorded' }}</p>
-            </td>
-            <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ entry.partySize }}</td>
-            <td class="px-4 py-3">
-              <span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(entry.status)">{{ statusLabel(entry.status) }}</span>
-            </td>
-            <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ entry.quotedWaitTime }} min</td>
-            <td class="px-4 py-3 capitalize text-gray-600 text-sm dark:text-neutral-300">{{ preferenceLabel(entry.tablePreference) }}</td>
-            <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDateTime(entry.checkInTime) }}</td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
-              <Button :if="entry.status === 'waiting'" variant="ghost" size="md" iconOnly :disabled="busyId() === entry.id" :ariaLabel="'Seat party for ' + (entry.name || 'customer')" @click="emit('seat', entry)">
-                <span class="block h-5 w-5 text-green-600 dark:text-green-300 i-hugeicons-checkmark-circle-02"></span>
-              </Button>
-              <Button :if="entry.status === 'waiting'" variant="ghost" size="md" iconOnly :disabled="busyId() === entry.id" :ariaLabel="'Mark no show for ' + (entry.name || 'customer')" @click="emit('no-show', entry)">
-                <span class="block h-5 w-5 text-red-600 dark:text-red-300 i-hugeicons-user-remove-01"></span>
-              </Button>
-              <Button variant="ghost" size="md" iconOnly :disabled="busyId() === entry.id" :ariaLabel="'Edit restaurant waitlist entry for ' + (entry.name || 'customer')" @click="emit('edit', entry)">
-                <span class="block h-5 w-5 text-blue-600 dark:text-blue-300 i-hugeicons-edit-01"></span>
-              </Button>
-              <Button variant="ghost" size="md" iconOnly :disabled="busyId() === entry.id" :ariaLabel="'Delete restaurant waitlist entry for ' + (entry.name || 'customer')" @click="emit('delete', entry)">
-                <span class="block h-5 w-5 text-red-600 dark:text-red-300 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. Paging is what was missing.
+--}}
+<Table
+  :columns="COLUMNS"
+  :data="rows()"
+  :loading="loading()"
+  :row-actions="ROW_ACTIONS"
+  action-label-key="name"
+  busy-key="id"
+  :busy-value="busyId()"
+  paginated
+  :page-size="25"
+  empty-title="No restaurant waitlist records found"
+  empty-description="Add a party or adjust the current filters."
+  @row-action="handleRowAction"
+/>

package/resources/components/Dashboard/Library/DependenciesDashboard.stx

@@ -1,4 +1,5 @@
 @import('../UI/Button')
+@import('../UI/Table')
 
 <script client>
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -11,13 +12,31 @@ interface DependencyRow {
   isScoped?: boolean
 }
 
+type DependencyKind = 'workspace' | 'transitive' | 'third-party'
+
+const COLUMNS = [
+  { key: 'name', label: 'Package', sortable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'version', label: 'Version', sortable: true, class: 'font-mono text-gray-500 dark:text-neutral-400' },
+  {
+    key: 'kind',
+    label: 'Source',
+    type: 'badge' as const,
+    sortable: true,
+    badgeClasses: {
+      'workspace': 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40',
+      'transitive': 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+      'third-party': 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700',
+    },
+    badgeLabels: { 'workspace': 'Workspace', 'transitive': 'Transitive', 'third-party': 'Third-party' },
+  },
+]
+
 const declared = state<DependencyRow[]>([])
 const transitive = state<DependencyRow[]>([])
 const available = state(true)
 const source = state('bun.lock')
 const loading = state(true)
 const loadError = state('')
-const search = state('')
 const dataset = state('declared')
 const scope = state('all')
 
@@ -25,12 +44,22 @@ function activeRows(): DependencyRow[] {
   return dataset() === 'transitive' ? transitive() : declared()
 }
 
-function visibleRows(): DependencyRow[] {
-  const query = search().trim().toLowerCase()
-  return activeRows().filter(dependency =>
-    (dataset() === 'transitive' || scope() === 'all' || (scope() === 'workspace' ? dependency.isWorkspace : !dependency.isWorkspace))
-    && (!query || [dependency.name, dependency.version].some(value => value.toLowerCase().includes(query))),
-  )
+/**
+ * `UI/Table` owns search, sort and paging, so this only applies the two
+ * filters that are specific to dependencies: which dataset is being read and,
+ * for the declared set, whether workspace packages are in scope.
+ *
+ * `kind` is computed here rather than in the cell because a badge column maps
+ * a row value to a label, and the right label for a non-workspace package
+ * depends on the dataset rather than the row.
+ */
+function visibleRows(): Array<DependencyRow & { kind: DependencyKind }> {
+  return activeRows()
+    .filter(dependency => dataset() === 'transitive' || scope() === 'all' || (scope() === 'workspace' ? dependency.isWorkspace : !dependency.isWorkspace))
+    .map(dependency => ({
+      ...dependency,
+      kind: dependency.isWorkspace ? 'workspace' : dataset() === 'transitive' ? 'transitive' : 'third-party',
+    }))
 }
 
 function workspaceCount(): number {
@@ -81,12 +110,37 @@ onMount(() => { void loadDependencies() })
     <article class="p-4 bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700"><p class="text-gray-500 text-xs dark:text-neutral-400">Transitive</p><p class="mt-2 font-semibold text-2xl text-gray-900 dark:text-white">{{ transitive().length }}</p></article>
   </section>
 
-  <section class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-    <div class="grid gap-3 sm:grid-cols-[minmax(0,1fr)_auto_auto] p-4 border-b border-gray-200 dark:border-neutral-700"><label><span class="sr-only">Search dependencies</span><input x-model="search" type="search" placeholder="Search package or version" class="px-3 py-2 max-w-xl w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700" /></label><label><span class="sr-only">Choose dependency dataset</span><select x-model="dataset" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700"><option value="declared">Declared</option><option value="transitive">Transitive</option></select></label><label><span class="sr-only">Filter dependency scope</span><select x-model="scope" :disabled="dataset() === 'transitive'" class="px-3 py-2 w-full text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-900 border border-gray-300 rounded-md dark:border-neutral-700 disabled:opacity-50"><option value="all">All scopes</option><option value="workspace">Workspace</option><option value="third-party">Third-party</option></select></label></div>
-    <div class="overflow-x-auto"><table class="min-w-full divide-gray-200 divide-y dark:divide-neutral-700"><thead class="bg-gray-50 dark:bg-neutral-900/50"><tr><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Package</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Version</th><th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs dark:text-neutral-300">Source</th></tr></thead><tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-      <template :if="loading()"><tr><td colspan="3" class="px-4 py-12 text-center text-gray-500 text-sm dark:text-neutral-400"><span class="inline-block mr-2 h-4 w-4 animate-spin i-hugeicons-loading-03"></span>Reading dependency graph</td></tr></template>
-      <template :else-if="visibleRows().length === 0"><tr><td colspan="3" class="px-4 py-14 text-center"><span class="inline-block h-6 w-6 text-gray-400 i-hugeicons-package"></span><p class="mt-2 font-medium text-gray-900 text-sm dark:text-white">No dependencies found</p><p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Adjust the dataset, scope, or search.</p></td></tr></template>
-      <template :else><template :for="dependency in visibleRows()"><tr><td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ dependency.name }}</td><td class="px-4 py-3 font-mono text-gray-500 text-sm dark:text-neutral-400">{{ dependency.version }}</td><td class="px-4 py-3"><span :class="'inline-flex px-2 py-1 font-medium text-xs rounded-full ' + (dependency.isWorkspace ? 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/40' : 'text-gray-600 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700')">{{ dependency.isWorkspace ? 'Workspace' : (dataset() === 'transitive' ? 'Transitive' : 'Third-party') }}</span></td></tr></template></template>
-    </tbody></table></div>
+  <section aria-label="Dependencies">
+    <Table
+      :columns="COLUMNS"
+      :data="visibleRows()"
+      :loading="loading()"
+      row-key="name"
+      searchable
+      search-placeholder="Search package or version"
+      paginated
+      :page-size="50"
+      striped
+      empty-title="No dependencies found"
+      empty-description="Adjust the dataset, scope, or search."
+    >
+      <template #toolbar>
+        <label>
+          <span class="sr-only">Choose dependency dataset</span>
+          <select x-model="dataset" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600">
+            <option value="declared">Declared</option>
+            <option value="transitive">Transitive</option>
+          </select>
+        </label>
+        <label>
+          <span class="sr-only">Filter dependency scope</span>
+          <select x-model="scope" :disabled="dataset() === 'transitive'" class="px-2.5 py-1.5 text-sm bg-white dark:bg-neutral-800 border border-stone-300 rounded-lg dark:border-neutral-600 disabled:opacity-50">
+            <option value="all">All scopes</option>
+            <option value="workspace">Workspace</option>
+            <option value="third-party">Third-party</option>
+          </select>
+        </label>
+      </template>
+    </Table>
   </section>
 </div>

package/resources/components/Dashboard/Realtime/RealtimeDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { RealtimeDashboardResponse, RealtimeEvent } from '../../../../functions/realtime'
 import { fetchRealtimeDashboard } from '../../../../functions/realtime'
@@ -31,6 +33,18 @@ function formatNumber(value: number): string {
   return new Intl.NumberFormat().format(value)
 }
 
+/**
+ * The recorded-events table. `occurredAt` is a `datetime` rather than a
+ * `date`: an event log is read to the minute, and this column is also the one
+ * it sorts by.
+ */
+const EVENT_COLUMNS = [
+  { key: 'occurredAt', label: 'Time', type: 'datetime' as const, sortable: true, class: 'whitespace-nowrap' },
+  { key: 'type', label: 'Type', sortable: true, filterable: true, class: 'font-medium text-gray-900 dark:text-white' },
+  { key: 'socket', label: 'Socket', sortable: true, class: 'font-mono text-xs' },
+  { key: 'details', label: 'Details', emptyText: 'No details' },
+]
+
 function formatDate(value: string): string {
   if (!value)
     return 'Not recorded'
@@ -208,31 +222,16 @@ onDestroy(() => {
       <h2 class="font-semibold text-gray-900 dark:text-white">Recorded Websocket events</h2>
       <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Persisted through the Websocket model. No latency or throughput is estimated.</p>
     </div>
-    <div :if="!isLoading() && recordedEvents().length === 0" class="px-5 py-12 text-center">
-      <p class="font-semibold text-gray-900 dark:text-white">No realtime events recorded</p>
-      <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Connection lifecycle events appear after they are persisted through the Websocket model.</p>
-    </div>
-    <div :if="recordedEvents().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">Time</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Type</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Socket</th>
-            <th class="px-4 py-3 font-medium text-gray-500 text-left text-xs uppercase dark:text-neutral-300">Details</th>
-          </tr>
-        </thead>
-        <tbody class="divide-gray-200 divide-y dark:divide-neutral-700">
-          <template :for="event in recordedEvents()">
-            <tr>
-              <td class="px-4 py-3 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(event.occurredAt) }}</td>
-              <td class="px-4 py-3 font-medium text-gray-900 text-sm dark:text-white">{{ event.type }}</td>
-              <td class="px-4 py-3 font-mono text-gray-500 text-xs dark:text-neutral-300">{{ event.socket }}</td>
-              <td class="px-4 py-3 text-gray-500 text-sm dark:text-neutral-300">{{ event.details }}</td>
-            </tr>
-          </template>
-        </tbody>
-      </table>
-    </div>
+    <Table
+      :columns="EVENT_COLUMNS"
+      :data="recordedEvents()"
+      :loading="isLoading()"
+      searchable
+      search-placeholder="Search recorded events"
+      paginated
+      :page-size="25"
+      empty-title="No realtime events recorded"
+      empty-description="Connection lifecycle events appear after they are persisted through the Websocket model."
+    />
   </section>
 </div>