@stacksjs/defaults 0.75.263 → 0.75.267

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>

package/resources/components/Dashboard/Releases/ReleaseDashboard.stx

@@ -1,3 +1,5 @@
+@import('../UI/Table')
+
 <script client>
 import type { ReleaseRecord, ReleaseSummary } from '../../../../app/Actions/Dashboard/Releases/release-records'
 import { dashboardApi } from '../../../../functions/dashboard-api'
@@ -41,27 +43,30 @@ function formatNumber(value: number): string {
   return new Intl.NumberFormat().format(value)
 }
 
-function formatDate(value: string): string {
-  if (!value)
-    return 'Not recorded'
-  const parsed = new Date(value)
-  if (Number.isNaN(parsed.getTime()))
-    return value
-  return new Intl.DateTimeFormat(undefined, {
-    dateStyle: 'medium',
-    timeStyle: 'short',
-  }).format(parsed)
-}
+const COLUMNS = [
+  { key: 'version', label: 'Version', sortable: true, subtitleKey: 'notes', class: 'font-semibold text-gray-900 dark:text-white' },
+  { key: 'type', label: 'Type', sortable: true, class: 'capitalize' },
+  {
+    key: 'statusKey',
+    label: 'Status',
+    type: 'badge' as const,
+    sortable: true,
+    badgeLabelKey: 'status',
+    badgeClasses: {
+      published: 'capitalize text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30',
+      scheduled: 'capitalize text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30',
+      draft: 'capitalize text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30',
+    },
+  },
+  { key: 'downloads', label: 'Downloads', type: 'number' as const, sortable: true, align: 'right' as const, class: 'font-mono' },
+  { key: 'author', label: 'Author', sortable: true, emptyText: 'Not recorded' },
+  { key: 'createdAt', label: 'Created', type: 'datetime' as const, sortable: true, emptyText: 'Not recorded', class: 'whitespace-nowrap' },
+]
 
-function statusClass(value: string): string {
-  if (value === 'published')
-    return 'text-green-700 dark:text-green-300 bg-green-50 dark:bg-green-950/30'
-  if (value === 'scheduled')
-    return 'text-blue-700 dark:text-blue-300 bg-blue-50 dark:bg-blue-950/30'
-  if (value === 'draft')
-    return 'text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-950/30'
-  return 'text-gray-700 dark:text-neutral-300 bg-gray-100 dark:bg-neutral-700'
-}
+const releaseRows = derived(() => rows().map(release => ({
+  ...release,
+  statusKey: release.status.toLowerCase(),
+})))
 
 async function loadReleases(): Promise<void> {
   isLoading.set(true)
@@ -141,47 +146,16 @@ onMount(() => {
       </div>
     </div>
 
-    <div class="overflow-hidden bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
-      <div :if="isLoading()" 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 releases
-      </div>
-      <div :else-if="rows().length === 0" class="p-8 text-center">
-        <div class="mx-auto h-8 w-8 text-gray-400 i-hugeicons-right-to-left-list-number"></div>
-        <p class="mt-3 font-medium text-gray-900 text-sm dark:text-white">No release records found</p>
-        <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Create releases through your application workflow and they will appear here.</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 class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Version</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Type</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Status</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-right text-xs uppercase dark:text-neutral-400">Downloads</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Author</th>
-              <th class="px-4 py-3 font-semibold text-gray-600 text-left text-xs uppercase dark:text-neutral-400">Created</th>
-            </tr>
-          </thead>
-          <tbody class="divide-gray-100 divide-y dark:divide-neutral-700">
-            <template :for="release in rows()" :key="release.id">
-              <tr>
-                <td class="px-4 py-3">
-                  <p class="font-semibold text-gray-900 text-sm dark:text-white">{{ release.version }}</p>
-                  <p :if="release.notes" class="mt-1 max-w-md text-gray-500 text-xs truncate dark:text-neutral-400">{{ release.notes }}</p>
-                </td>
-                <td class="px-4 py-3 capitalize text-gray-600 text-sm dark:text-neutral-300">{{ release.type }}</td>
-                <td class="px-4 py-3">
-                  <span :class="'inline-flex px-2 py-1 font-medium text-xs capitalize rounded-full ' + statusClass(release.status)">{{ release.status }}</span>
-                </td>
-                <td class="px-4 py-3 font-mono text-gray-700 text-right text-sm dark:text-neutral-200">{{ formatNumber(release.downloads) }}</td>
-                <td class="px-4 py-3 text-gray-600 text-sm dark:text-neutral-300">{{ release.author || 'Not recorded' }}</td>
-                <td class="px-4 py-3 text-gray-600 text-sm whitespace-nowrap dark:text-neutral-300">{{ formatDate(release.createdAt) }}</td>
-              </tr>
-            </template>
-          </tbody>
-        </table>
-      </div>
+    <div class="bg-white dark:bg-neutral-800 border border-gray-200 rounded-lg dark:border-neutral-700">
+      <Table
+        :columns="COLUMNS"
+        :data="releaseRows()"
+        :loading="isLoading()"
+        paginated
+        :page-size="25"
+        empty-title="No release records found"
+        empty-description="Create releases through your application workflow and they will appear here."
+      />
     </div>
   </section>
 </div>