betterstart-cli 0.0.28 → 0.0.30

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>
+  )
+}

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

@@ -0,0 +1,253 @@
+'use client'
+
+import type { WebhookDeliveryEntry } from '@admin/actions/webhooks'
+import {
+  DataGrid,
+  DataGridBody,
+  DataGridCell,
+  DataGridHead,
+  DataGridHeader,
+  DataGridRow
+} from '@admin/components/shared/data-table/data-grid'
+import { DataTablePagination } from '@admin/components/shared/data-table/data-table-pagination'
+import { useTableUtils } from '@admin/hooks/use-table-utils'
+import { useWebhookDeliveries } from '@admin/hooks/use-webhooks'
+import { cn } from '@admin/utils/shared/cn'
+import { type ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'
+import { GripVertical } from 'lucide-react'
+import { parseAsInteger, parseAsString, useQueryStates } from 'nuqs'
+
+interface WebhooksLogsTableProps<TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  columns: ColumnDef<WebhookDeliveryEntry, TValue>[]
+  search?: string
+  status?: string
+  endpoint?: string
+  createdAtFrom?: string
+  createdAtTo?: string
+}
+
+export function WebhooksLogsTable<TValue>({
+  columns,
+  search,
+  status,
+  endpoint,
+  createdAtFrom,
+  createdAtTo,
+  className
+}: WebhooksLogsTableProps<TValue>) {
+  const defaultPageSize = 20
+  const [{ page: pageIndex, size: pageSize, sort: sortField, dir: sortDir }, setTableQuery] =
+    useQueryStates({
+      page: parseAsInteger.withDefault(0),
+      size: parseAsInteger.withDefault(defaultPageSize),
+      sort: parseAsString.withDefault(''),
+      dir: parseAsString.withDefault('')
+    })
+
+  const safePageIndex = Number.isFinite(pageIndex) && pageIndex > 0 ? pageIndex : 0
+  const safePageSize =
+    pageSize === -1 || (Number.isFinite(pageSize) && pageSize > 0) ? pageSize : defaultPageSize
+  const { data, error, isPending } = useWebhookDeliveries(
+    search,
+    status,
+    endpoint,
+    createdAtFrom,
+    createdAtTo,
+    safePageIndex,
+    safePageSize,
+    sortField || undefined,
+    (sortDir as 'asc' | 'desc') || undefined
+  )
+
+  const tableData = data?.deliveries ?? []
+  const totalRows = data?.total ?? 0
+  const effectivePageSize = safePageSize === -1 ? totalRows : safePageSize
+  const pageCount = effectivePageSize > 0 ? Math.ceil(totalRows / effectivePageSize) : 1
+  const shouldShowPagination = totalRows > defaultPageSize
+
+  const {
+    columnSizing,
+    handleColumnSizingChange,
+    handlePaginationChange,
+    handleSortingChange,
+    hoveredColumnId,
+    registerTable,
+    resetColumnSizingToContainer,
+    setHoveredColumnId,
+    sorting,
+    tableContainerRef
+  } = useTableUtils<WebhookDeliveryEntry>({
+    data: tableData,
+    pageIndex: safePageIndex,
+    pageSize: effectivePageSize,
+    setPageIndex: (nextPageIndex) => setTableQuery({ page: nextPageIndex }),
+    setSortingParams: ({
+      pageIndex: nextPageIndex,
+      sortDir: nextSortDir,
+      sortField: nextSortField
+    }) =>
+      setTableQuery({
+        page: nextPageIndex,
+        sort: nextSortField,
+        dir: nextSortDir
+      }),
+    sortField,
+    sortDir
+  })
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: {
+      minSize: 48,
+      size: 220
+    },
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+    pageCount,
+    rowCount: totalRows,
+    onSortingChange: handleSortingChange,
+    onColumnSizingChange: handleColumnSizingChange,
+    onPaginationChange: handlePaginationChange,
+    state: {
+      sorting,
+      columnSizing,
+      pagination: {
+        pageIndex: safePageIndex,
+        pageSize: effectivePageSize
+      }
+    }
+  })
+  registerTable(table)
+  const gridTemplateColumns = table
+    .getVisibleLeafColumns()
+    .map((column) => `${column.getSize()}px`)
+    .join(' ')
+
+  return (
+    <div className={cn('flex flex-col gap-6 pt-px pb-2 h-full', className)}>
+      <DataGrid
+        containerClassName="min-h-0 flex-1"
+        containerRef={tableContainerRef}
+        gridTemplateColumns={gridTemplateColumns}
+        style={{ width: table.getTotalSize() }}
+      >
+        <DataGridHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <DataGridRow key={headerGroup.id}>
+              {headerGroup.headers.map((header, headerIndex) => {
+                const resizeLabel =
+                  typeof header.column.columnDef.header === 'string'
+                    ? header.column.columnDef.header
+                    : header.column.id
+                const nextHeader = headerGroup.headers[headerIndex + 1]
+                const canResizeColumn =
+                  header.column.getCanResize() && nextHeader?.column.getCanResize() === true
+                return (
+                  <DataGridHead
+                    key={header.id}
+                    className="group/resize-header relative overflow-hidden"
+                    data-column-id={header.column.id}
+                    onMouseEnter={() => setHoveredColumnId(header.column.id)}
+                    onMouseLeave={() =>
+                      setHoveredColumnId((current) =>
+                        current === header.column.id ? null : current
+                      )
+                    }
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(header.column.columnDef.header, header.getContext())}
+                    {canResizeColumn ? (
+                      <button
+                        type="button"
+                        aria-label={`Resize ${resizeLabel} column`}
+                        className="group/resize-handle absolute right-0 top-0 z-10 flex h-full w-5 cursor-col-resize touch-none select-none items-center justify-center text-muted-foreground opacity-0 transition-opacity hover:text-foreground focus-visible:text-foreground focus-visible:opacity-100 focus-visible:outline-none group-focus-within/resize-header:opacity-100 data-[column-hovered=true]:opacity-100 data-[resizing=true]:opacity-100"
+                        data-resize-handle
+                        data-column-hovered={
+                          hoveredColumnId === header.column.id ? 'true' : 'false'
+                        }
+                        data-resizing={header.column.getIsResizing() ? 'true' : 'false'}
+                        onDoubleClick={resetColumnSizingToContainer}
+                        onMouseDown={header.getResizeHandler()}
+                        onTouchStart={header.getResizeHandler()}
+                      >
+                        <GripVertical
+                          aria-hidden="true"
+                          className={cn('size-3.5', {
+                            'text-ring': header.column.getIsResizing()
+                          })}
+                        />
+                      </button>
+                    ) : null}
+                  </DataGridHead>
+                )
+              })}
+            </DataGridRow>
+          ))}
+        </DataGridHeader>
+        <DataGridBody>
+          {isPending ? (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                <div className="text-muted-foreground">Loading deliveries…</div>
+              </DataGridCell>
+            </DataGridRow>
+          ) : error ? (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                <div className="text-destructive">Error loading deliveries: {error.message}</div>
+              </DataGridCell>
+            </DataGridRow>
+          ) : table.getRowModel().rows?.length ? (
+            table.getRowModel().rows.map((row) => (
+              <DataGridRow key={row.id} className="hover:bg-muted/50">
+                {row.getVisibleCells().map((cell) => (
+                  <DataGridCell
+                    key={cell.id}
+                    data-column-id={cell.column.id}
+                    onMouseEnter={() => setHoveredColumnId(cell.column.id)}
+                    onMouseLeave={() =>
+                      setHoveredColumnId((current) => (current === cell.column.id ? null : current))
+                    }
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </DataGridCell>
+                ))}
+              </DataGridRow>
+            ))
+          ) : (
+            <DataGridRow>
+              <DataGridCell
+                className="flex h-24 items-center justify-center text-center"
+                style={{ gridColumn: '1 / -1' }}
+              >
+                No deliveries found.
+              </DataGridCell>
+            </DataGridRow>
+          )}
+        </DataGridBody>
+      </DataGrid>
+
+      {shouldShowPagination ? (
+        <DataTablePagination
+          table={table}
+          paginationMode="controlled"
+          pageSize={safePageSize}
+          pageIndex={safePageIndex}
+          pageCount={pageCount}
+          setPageIndex={(nextPageIndex) => setTableQuery({ page: nextPageIndex })}
+          setPageSize={(nextPageSize) => setTableQuery({ page: 0, size: nextPageSize })}
+        />
+      ) : null}
+    </div>
+  )
+}