betterstart-cli 0.0.27 → 0.0.29

package/dist/assets/adapters/next/templates/init/pages/settings/audit-log/audit-log-table.tsx

@@ -0,0 +1,295 @@
+'use client'
+
+import type { AuditLogEntry, AuditLogQuery, AuditLogSortField } from '@admin/actions/audit'
+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 { useAuditLogs } from '@admin/hooks/use-audit-log'
+import { useTableUtils } from '@admin/hooks/use-table-utils'
+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'
+import * as React from 'react'
+import { AUDIT_LOG_SORT_FIELDS } from './audit-log-columns'
+
+interface AuditLogTableProps<TValue> extends React.HTMLAttributes<HTMLDivElement> {
+  columns: ColumnDef<AuditLogEntry, TValue>[]
+  search?: string
+  category?: string
+  action?: string
+  createdAtFrom?: string
+  createdAtTo?: string
+  onRowClick: (auditLog: AuditLogEntry) => void
+}
+
+type AuditLogSortDirection = NonNullable<AuditLogQuery['dir']>
+
+function isAuditLogSortField(value: string): value is AuditLogSortField {
+  return (AUDIT_LOG_SORT_FIELDS as readonly string[]).includes(value)
+}
+
+function isAuditLogSortDirection(value: string): value is AuditLogSortDirection {
+  return value === 'asc' || value === 'desc'
+}
+
+export function AuditLogTable<TValue>({
+  columns,
+  search,
+  category,
+  action,
+  createdAtFrom,
+  createdAtTo,
+  onRowClick,
+  className
+}: AuditLogTableProps<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 safeSortField = isAuditLogSortField(sortField) ? sortField : undefined
+  const safeSortDir = safeSortField
+    ? isAuditLogSortDirection(sortDir)
+      ? sortDir
+      : 'asc'
+    : undefined
+  const query = React.useMemo<AuditLogQuery>(
+    () => ({
+      search: search || undefined,
+      category: category ? (category as AuditLogQuery['category']) : undefined,
+      action: action ? (action as AuditLogQuery['action']) : undefined,
+      createdAtFrom: createdAtFrom || undefined,
+      createdAtTo: createdAtTo || undefined,
+      page: safePageIndex,
+      pageSize: safePageSize,
+      sort: safeSortField,
+      dir: safeSortDir
+    }),
+    [
+      action,
+      category,
+      createdAtFrom,
+      createdAtTo,
+      safePageIndex,
+      safePageSize,
+      safeSortDir,
+      safeSortField,
+      search
+    ]
+  )
+  const { data, error, isPending } = useAuditLogs(query)
+  const auditLogs = data?.auditLogs ?? []
+  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<AuditLogEntry>({
+    data: auditLogs,
+    pageIndex: safePageIndex,
+    pageSize: effectivePageSize,
+    setPageIndex: (nextPageIndex) => setTableQuery({ page: nextPageIndex }),
+    setSortingParams: ({
+      pageIndex: nextPageIndex,
+      sortDir: nextSortDir,
+      sortField: nextSortField
+    }) =>
+      setTableQuery({
+        page: nextPageIndex,
+        sort: nextSortField,
+        dir: nextSortDir
+      }),
+    sortField: safeSortField,
+    sortDir: safeSortDir
+  })
+
+  const table = useReactTable({
+    data: auditLogs,
+    columns,
+    columnResizeMode: 'onChange',
+    defaultColumn: {
+      minSize: 48,
+      size: 220
+    },
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    manualSorting: true,
+    pageCount,
+    rowCount: totalRows,
+    onColumnSizingChange: handleColumnSizingChange,
+    onPaginationChange: handlePaginationChange,
+    onSortingChange: handleSortingChange,
+    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 Audit Logs…</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 Audit Logs: {error.message}</div>
+              </DataGridCell>
+            </DataGridRow>
+          ) : table.getRowModel().rows.length ? (
+            table.getRowModel().rows.map((row) => (
+              <DataGridRow
+                key={row.id}
+                className="cursor-pointer hover:bg-muted/50"
+                onClick={(event) => {
+                  const target = event.target as HTMLElement
+                  if (!event.currentTarget.contains(target)) return
+                  if (target.closest('button, a, input, [role="checkbox"]')) return
+                  onRowClick(row.original)
+                }}
+              >
+                {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 Audit Logs 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>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/edit-form-notifications-dialog.tsx

@@ -0,0 +1,128 @@
+'use client'
+
+import { upsertFormSettings } from '@admin/actions/forms'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
+} from '@admin/components/ui/form'
+import { Textarea } from '@admin/components/ui/textarea'
+import { standardSchemaResolver } from '@hookform/resolvers/standard-schema'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import { useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod/v3'
+
+const notificationsSchema = z.object({
+  notificationEmails: z.string().trim()
+})
+
+type NotificationsFormValues = z.infer<typeof notificationsSchema>
+
+interface EditFormNotificationsDialogProps {
+  formLabel: string
+  settingsKey: string
+  initialEmails: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function EditFormNotificationsDialog({
+  formLabel,
+  settingsKey,
+  initialEmails,
+  open,
+  onOpenChange
+}: EditFormNotificationsDialogProps) {
+  const queryClient = useQueryClient()
+
+  const form = useForm<NotificationsFormValues>({
+    resolver: standardSchemaResolver(notificationsSchema),
+    defaultValues: { notificationEmails: initialEmails }
+  })
+
+  const mutation = useMutation({
+    mutationFn: async (values: NotificationsFormValues) => {
+      const result = await upsertFormSettings(settingsKey, {
+        notificationEmails: values.notificationEmails || null
+      })
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to save notification emails')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('Notification emails saved')
+      await queryClient.invalidateQueries({ queryKey: ['form-settings'] })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-135">
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit((values) => mutation.mutate(values))}>
+            <DialogHeader>
+              <DialogTitle>{formLabel} notifications</DialogTitle>
+              <DialogDescription>
+                Send an email to these addresses when a submission arrives
+              </DialogDescription>
+            </DialogHeader>
+
+            <DialogBody>
+              <FormField
+                control={form.control}
+                name="notificationEmails"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Notification emails</FormLabel>
+                    <FormControl>
+                      <Textarea
+                        placeholder="sales@example.com, team@example.com"
+                        disabled={isPending}
+                        {...field}
+                      />
+                    </FormControl>
+                    <FormDescription>
+                      Comma-separated email addresses. Leave empty to disable notifications.
+                    </FormDescription>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </DialogBody>
+
+            <DialogFooter showCloseButton={true}>
+              <Button type="submit" disabled={isPending || !form.formState.isDirty} size="lg">
+                {isPending && <LoaderCircle className="animate-spin" />}
+                Save
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  )
+}

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

@@ -0,0 +1,111 @@
+'use client'
+
+import { PageHeader } from '@admin/components/shared/page-header'
+import { Button } from '@admin/components/ui/button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from '@admin/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@admin/components/ui/table'
+import { webhookEventSources } from '@admin/data/webhook-events'
+import { useFormSettingsList } from '@admin/hooks/use-webhooks'
+import * as React from 'react'
+import { EditFormNotificationsDialog } from './edit-form-notifications-dialog'
+
+export function FormsSettingsPageContent() {
+  const formSources = webhookEventSources.filter((source) => source.kind === 'form')
+  const { data: settings, isPending } = useFormSettingsList()
+  const [editingKey, setEditingKey] = React.useState<string | null>(null)
+
+  const editingSource = formSources.find((source) => source.settingsKey === editingKey)
+
+  return (
+    <React.Fragment>
+      <PageHeader title="Form Settings" />
+      <main className="mx-auto max-w-5xl w-full space-y-4 p-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Form notifications</CardTitle>
+            <CardDescription>
+              Emails notified when a submission arrives. Webhooks are managed on the Webhooks tab.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {formSources.length === 0 ? (
+              <p className="text-sm text-muted-foreground">
+                No forms yet. Create a form schema to configure its notifications here.
+              </p>
+            ) : (
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Form</TableHead>
+                    <TableHead>Notification emails</TableHead>
+                    <TableHead className="w-20" />
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {formSources.map((source) => {
+                    const formSettings = settings?.find(
+                      (entry) => entry.formName === source.settingsKey
+                    )
+                    return (
+                      <TableRow key={source.schema}>
+                        <TableCell className="font-medium">{source.label}</TableCell>
+                        <TableCell>
+                          {isPending ? (
+                            <span className="text-muted-foreground">Loading…</span>
+                          ) : formSettings?.notificationEmails ? (
+                            <span className="font-mono text-xs">
+                              {formSettings.notificationEmails}
+                            </span>
+                          ) : (
+                            <span className="text-muted-foreground">No emails configured</span>
+                          )}
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => setEditingKey(source.settingsKey ?? source.schema)}
+                          >
+                            Edit
+                          </Button>
+                        </TableCell>
+                      </TableRow>
+                    )
+                  })}
+                </TableBody>
+              </Table>
+            )}
+          </CardContent>
+        </Card>
+      </main>
+      {editingSource?.settingsKey && (
+        <EditFormNotificationsDialog
+          key={editingSource.settingsKey}
+          formLabel={editingSource.label}
+          settingsKey={editingSource.settingsKey}
+          initialEmails={
+            settings?.find((entry) => entry.formName === editingSource.settingsKey)
+              ?.notificationEmails ?? ''
+          }
+          open={editingKey !== null}
+          onOpenChange={(nextOpen) => {
+            if (!nextOpen) setEditingKey(null)
+          }}
+        />
+      )}
+    </React.Fragment>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/forms/forms-settings-page-skeleton.tsx

@@ -0,0 +1,7 @@
+export function FormsSettingsPageSkeleton() {
+  return (
+    <div className="flex items-center justify-center h-48">
+      <div className="text-muted-foreground">Loading Form Settings…</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,14 @@
+import { requireRole, UserRole } from '@admin/auth/middleware'
+import * as React from 'react'
+import { FormsSettingsPageContent } from './forms-settings-page-content'
+import { FormsSettingsPageSkeleton } from './forms-settings-page-skeleton'
+
+export default async function FormsSettingsPage() {
+  await requireRole([UserRole.ADMIN, UserRole.EDITOR])
+
+  return (
+    <React.Suspense fallback={<FormsSettingsPageSkeleton />}>
+      <FormsSettingsPageContent />
+    </React.Suspense>
+  )
+}

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

@@ -0,0 +1,10 @@
+import { AdminSettingsSidebar } from '@admin/components/layouts/admin-settings-sidebar'
+
+export default function SettingsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="fixed inset-y-0 right-0 left-(--admin-shell-content-left) flex min-w-0 transition-[left] duration-200 ease-linear">
+      <AdminSettingsSidebar />
+      <div className="min-w-0 flex-1 overflow-auto">{children}</div>
+    </div>
+  )
+}

package/dist/assets/adapters/next/templates/init/pages/settings/webhooks/delete-webhook-dialog.tsx

@@ -0,0 +1,82 @@
+'use client'
+
+import type { WebhookEndpointListItem } from '@admin/actions/webhooks'
+import { deleteWebhook } from '@admin/actions/webhooks'
+import { Button } from '@admin/components/ui/button'
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@admin/components/ui/dialog'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import { LoaderCircle } from 'lucide-react'
+import { toast } from 'sonner'
+
+interface DeleteWebhookDialogProps {
+  webhook: WebhookEndpointListItem | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}
+
+export function DeleteWebhookDialog({ webhook, open, onOpenChange }: DeleteWebhookDialogProps) {
+  const queryClient = useQueryClient()
+
+  const mutation = useMutation({
+    mutationFn: async () => {
+      if (!webhook) throw new Error('No endpoint selected')
+      const result = await deleteWebhook(webhook.id)
+      if (!result.success) {
+        throw new Error(result.error || 'Failed to delete endpoint')
+      }
+
+      return result
+    },
+    onSuccess: async () => {
+      toast.success('Endpoint deleted')
+      await queryClient.invalidateQueries({ queryKey: ['webhooks'] })
+      await queryClient.invalidateQueries({
+        queryKey: ['webhook-subscriptions']
+      })
+      await queryClient.invalidateQueries({ queryKey: ['webhook-deliveries'] })
+      onOpenChange(false)
+    },
+    onError: (error: Error) => {
+      toast.error(error.message || 'An unexpected error occurred')
+    }
+  })
+
+  const isPending = mutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-105">
+        <DialogHeader>
+          <DialogTitle>Delete endpoint</DialogTitle>
+          <DialogDescription>
+            {webhook
+              ? `"${webhook.name}" will stop receiving events. Its subscriptions and delivery history are removed too.`
+              : 'This endpoint will stop receiving events.'}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogBody>
+          <p className="text-sm text-muted-foreground">This action cannot be undone.</p>
+        </DialogBody>
+        <DialogFooter showCloseButton={true}>
+          <Button
+            variant="destructive"
+            size="lg"
+            disabled={isPending}
+            onClick={() => mutation.mutate()}
+          >
+            {isPending && <LoaderCircle className="animate-spin" />}
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}