betterstart-cli 0.0.27 → 0.0.29

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-columns.tsx

@@ -0,0 +1,258 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+import type { ColumnDef } from '@tanstack/react-table'
+import { formatDistanceToNow } from 'date-fns'
+import { WebhookActions } from './webhook-actions'
+import { WebhookEnabledSwitch } from './webhook-enabled-switch'
+
+interface WebhooksColumnsOptions {
+  onEdit: (webhook: WebhookEndpointListItem) => void
+  onDelete: (webhook: WebhookEndpointListItem) => void
+}
+
+export function createWebhooksColumns({
+  onEdit,
+  onDelete
+}: WebhooksColumnsOptions): ColumnDef<WebhookEndpointListItem>[] {
+  return [
+    {
+      accessorKey: 'name',
+      size: 240,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Name, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Name</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <span className="truncate font-medium">{row.original.name}</span>,
+      enableHiding: false
+    },
+    {
+      accessorKey: 'url',
+      size: 320,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by URL, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">URL</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => (
+        <span className="truncate font-mono text-xs text-muted-foreground">{row.original.url}</span>
+      )
+    },
+    {
+      accessorKey: 'enabled',
+      size: 110,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Enabled, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Enabled</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <WebhookEnabledSwitch webhook={row.original} />
+    },
+    {
+      accessorKey: 'eventCount',
+      size: 100,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Events, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Events</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => <span className="tabular-nums">{row.original.eventCount}</span>
+    },
+    {
+      accessorKey: 'lastDeliveryAt',
+      size: 220,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Last delivery, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Last delivery</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) =>
+        row.original.lastDeliveryAt ? (
+          <span className="flex min-w-0 items-center gap-2">
+            <Badge variant={row.original.lastDeliverySuccess ? 'outline' : 'destructive'}>
+              {row.original.lastDeliverySuccess ? 'Delivered' : 'Failed'}
+            </Badge>
+            <span className="truncate text-xs text-muted-foreground">
+              {formatDistanceToNow(new Date(row.original.lastDeliveryAt), {
+                addSuffix: true
+              })}
+            </span>
+          </span>
+        ) : (
+          <span className="text-muted-foreground">—</span>
+        )
+    },
+    {
+      accessorKey: 'createdAt',
+      size: 120,
+      header: ({ column }) => {
+        const sortDirection = column.getIsSorted()
+        const sortLabel =
+          sortDirection === 'asc'
+            ? 'sorted ascending'
+            : sortDirection === 'desc'
+              ? 'sorted descending'
+              : 'not sorted'
+
+        return (
+          <Button
+            variant="ghost"
+            onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+            className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+            aria-label={`Sort by Created, ${sortLabel}`}
+            aria-sort={
+              sortDirection === 'asc'
+                ? 'ascending'
+                : sortDirection === 'desc'
+                  ? 'descending'
+                  : 'none'
+            }
+          >
+            <span className="truncate">Created</span>
+            <SortIndicator direction={sortDirection} />
+          </Button>
+        )
+      },
+      cell: ({ row }) => (
+        <div className="text-sm">
+          {new Date(row.original.createdAt).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+          })}
+        </div>
+      )
+    },
+    {
+      id: 'actions',
+      size: 64,
+      enableResizing: false,
+      meta: { width: '64px' },
+      header: () => <span className="sr-only">Actions</span>,
+      cell: ({ row }) => (
+        <div className="flex justify-end">
+          <WebhookActions webhook={row.original} onEdit={onEdit} onDelete={onDelete} />
+        </div>
+      )
+    }
+  ]
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-columns.tsx

@@ -0,0 +1,200 @@
+'use client'
+
+import type { WebhookDeliveryEntry } from '@admin/actions/webhooks'
+import { SortIndicator } from '@admin/components/shared/sort-indicator'
+import { Badge } from '@admin/components/ui/badge'
+import { Button } from '@admin/components/ui/button'
+import type { ColumnDef } from '@tanstack/react-table'
+import { formatDistanceToNow } from 'date-fns'
+
+export const logsColumns: ColumnDef<WebhookDeliveryEntry>[] = [
+  {
+    accessorKey: 'statusCode',
+    size: 110,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by Status, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">Status</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => (
+      <Badge
+        variant={row.original.success ? 'outline' : 'destructive'}
+        title={row.original.error ?? undefined}
+      >
+        {row.original.statusCode ?? 'error'}
+      </Badge>
+    )
+  },
+  {
+    accessorKey: 'event',
+    size: 260,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by Event, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">Event</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <span className="truncate font-mono text-xs">{row.original.event}</span>
+  },
+  {
+    accessorKey: 'webhookName',
+    size: 220,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by Endpoint, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">Endpoint</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <span className="truncate">{row.original.webhookName}</span>
+  },
+  {
+    accessorKey: 'attempt',
+    size: 100,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by Attempt, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">Attempt</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => <span className="tabular-nums">{row.original.attempt}</span>
+  },
+  {
+    accessorKey: 'durationMs',
+    size: 110,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by Duration, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">Duration</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => (
+      <span className="tabular-nums text-muted-foreground">{row.original.durationMs} ms</span>
+    )
+  },
+  {
+    accessorKey: 'createdAt',
+    size: 160,
+    header: ({ column }) => {
+      const sortDirection = column.getIsSorted()
+      const sortLabel =
+        sortDirection === 'asc'
+          ? 'sorted ascending'
+          : sortDirection === 'desc'
+            ? 'sorted descending'
+            : 'not sorted'
+
+      return (
+        <Button
+          variant="ghost"
+          onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
+          className="w-full min-w-0 justify-start overflow-hidden px-0! border-none rounded-none bg-transparent! scale-100! group"
+          aria-label={`Sort by When, ${sortLabel}`}
+          aria-sort={
+            sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : 'none'
+          }
+        >
+          <span className="truncate">When</span>
+          <SortIndicator direction={sortDirection} />
+        </Button>
+      )
+    },
+    cell: ({ row }) => (
+      <span className="truncate text-muted-foreground">
+        {formatDistanceToNow(new Date(row.original.createdAt), {
+          addSuffix: true
+        })}
+      </span>
+    )
+  }
+]

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page-content.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { EntityFiltersBar } from '@admin/components/shared/entity-filters-bar'
+import { PageHeader } from '@admin/components/shared/page-header'
+import { useWebhookOptions } from '@admin/hooks/use-webhooks'
+import { useIsFetching } from '@tanstack/react-query'
+import { parseAsInteger, parseAsString, useQueryState, useQueryStates } from 'nuqs'
+import * as React from 'react'
+import { logsColumns } from './webhooks-logs-columns'
+import { WebhooksLogsTable } from './webhooks-logs-table'
+
+const filterParsers = {
+  status: parseAsString.withDefault(''),
+  endpoint: parseAsString.withDefault(''),
+  createdAtFrom: parseAsString.withDefault(''),
+  createdAtTo: parseAsString.withDefault('')
+} as const
+
+export function WebhooksLogsPageContent() {
+  const isSearchFetching = useIsFetching({ queryKey: ['webhook-deliveries'] }) > 0
+  const [search, setSearch] = useQueryState('q', parseAsString.withDefault(''))
+  const [, setPageIndex] = useQueryState('page', parseAsInteger.withDefault(0))
+
+  const [filterValues, setFilters] = useQueryStates(filterParsers)
+  const status = filterValues.status
+  const endpoint = filterValues.endpoint
+  const createdAtFrom = filterValues.createdAtFrom
+  const createdAtTo = filterValues.createdAtTo
+
+  const { data: endpointOptions } = useWebhookOptions()
+
+  const activeFilterCount = [search, status, endpoint, createdAtFrom || createdAtTo].filter(
+    Boolean
+  ).length
+
+  function handleSearch(value: string | null) {
+    React.startTransition(() => {
+      void setPageIndex(0)
+      void setSearch(value)
+    })
+  }
+
+  function handleClearAll() {
+    React.startTransition(() => {
+      void setPageIndex(0)
+      void setSearch(null)
+      void setFilters({
+        status: null,
+        endpoint: null,
+        createdAtFrom: null,
+        createdAtTo: null
+      })
+    })
+  }
+
+  const filters = [
+    {
+      key: 'status',
+      label: 'Results',
+      type: 'select' as const,
+      value: status,
+      options: [
+        { label: 'Success', value: 'success' },
+        { label: 'Failed', value: 'failed' }
+      ]
+    },
+    {
+      key: 'endpoint',
+      label: 'Endpoints',
+      type: 'select' as const,
+      value: endpoint,
+      options: (endpointOptions?.webhooks ?? []).map((webhook) => ({
+        label: webhook.name,
+        value: webhook.id
+      }))
+    },
+    {
+      key: 'createdAt',
+      label: 'Created',
+      type: 'date-range' as const,
+      from: createdAtFrom,
+      to: createdAtTo
+    }
+  ]
+
+  return (
+    <React.Fragment>
+      <PageHeader title="Webhook Logs" />
+
+      <EntityFiltersBar
+        filters={filters}
+        activeFilterCount={activeFilterCount}
+        onFilterChange={(updates) => {
+          React.startTransition(() => {
+            void setPageIndex(0)
+            void setFilters(updates)
+          })
+        }}
+        onClearAll={handleClearAll}
+        search={search}
+        searchPlaceholder="Search deliveries..."
+        isPending={isSearchFetching}
+        onSearch={handleSearch}
+      />
+      <main className="space-y-4 px-4 pb-4 flex-1">
+        <WebhooksLogsTable
+          columns={logsColumns}
+          search={search}
+          status={status}
+          endpoint={endpoint}
+          createdAtFrom={createdAtFrom}
+          createdAtTo={createdAtTo}
+        />
+      </main>
+    </React.Fragment>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/webhooks-logs-page.tsx

@@ -0,0 +1,14 @@
+import { requireRole, UserRole } from '@admin/auth/middleware'
+import * as React from 'react'
+import { WebhooksLogsPageContent } from '../webhooks-logs-page-content'
+import { WebhooksPageSkeleton } from '../webhooks-page-skeleton'
+
+export default async function WebhooksLogsPage() {
+  await requireRole([UserRole.ADMIN])
+
+  return (
+    <React.Suspense fallback={<WebhooksPageSkeleton />}>
+      <WebhooksLogsPageContent />
+    </React.Suspense>
+  )
+}