@actuate-media/cms-admin 0.79.1 → 0.80.1

package/src/AdminRoot.tsx

@@ -25,6 +25,7 @@ import { Forms } from './views/Forms.js'
 import { FormEditor } from './views/FormEditor.js'
 import { FormSubmissions } from './views/FormSubmissions.js'
 import { FormEntries } from './views/FormEntries.js'
+import { FormDeliveries } from './views/FormDeliveries.js'
 import { SEO, SEO_DEEP_PATHS, seoTabForPath } from './views/SEO.js'
 import { ScriptTags } from './views/ScriptTags.js'
 import { SetupWizard } from './views/SetupWizard.js'
@@ -530,6 +531,9 @@ function AdminShell({
     if (matchRoute('/forms/entries')) {
       return <FormEntries onNavigate={navigate} />
     }
+    if (matchRoute('/forms/deliveries')) {
+      return <FormDeliveries onNavigate={navigate} />
+    }
     const formEdit = matchRoute('/forms/:id/edit')
     if (formEdit?.id) {
       return <FormEditor formId={formEdit.id} onNavigate={navigate} />

package/src/components/Breadcrumbs.tsx

@@ -17,6 +17,8 @@ const LABEL_MAP: Record<string, string> = {
   profile: 'Your Profile',
   collections: 'Collections',
   submissions: 'Submissions',
+  entries: 'All Entries',
+  deliveries: 'Deliveries',
   new: 'New',
   edit: 'Edit',
 }

package/src/index.ts

@@ -59,6 +59,8 @@ export { Forms } from './views/Forms.js'
 export { FormEditor } from './views/FormEditor.js'
 export type { FormEditorProps } from './views/FormEditor.js'
 export { FormSubmissions } from './views/FormSubmissions.js'
+export { FormDeliveries } from './views/FormDeliveries.js'
+export type { FormDeliveriesProps } from './views/FormDeliveries.js'
 /** @deprecated Superseded by the Redirects tab inside the `SEO` view; will be removed in the next major. */
 export { Redirects } from './views/Redirects.js'
 export { Users } from './views/Users.js'

package/src/layout/Sidebar.tsx

@@ -16,6 +16,7 @@ import {
   ChevronDown,
   ClipboardList,
   Inbox,
+  AlertTriangle,
   Search as SearchIcon,
   Briefcase,
   FolderOpen,
@@ -355,6 +356,7 @@ function applyFormsNav(items: NavItem[], state: FormsSidebarState): NavItem[] {
     if (item.path !== '/forms') return item
     const children: NavItem[] = [
       { path: '/forms/entries', label: 'All Entries', icon: Inbox },
+      { path: '/forms/deliveries', label: 'Deliveries', icon: AlertTriangle },
       ...state.forms.map((f) => ({
         path: `/forms/${f.formId}/submissions`,
         label: f.name,

package/src/lib/forms-service.ts

@@ -493,3 +493,77 @@ export async function downloadEntriesExport(
   URL.revokeObjectURL(url)
   return {}
 }
+
+// ─── Delivery attempts (#675) ─────────────────────────────────────────────
+
+export type FormDeliveryChannel = 'email_notify' | 'email_autoresponder' | 'form_webhook'
+export type FormDeliveryStatus = 'pending' | 'retrying' | 'success' | 'failed' | 'skipped'
+
+export interface FormDeliveryAttempt {
+  id: string
+  submissionId: string
+  formId: string
+  channel: FormDeliveryChannel
+  destination: string
+  webhookId: string | null
+  status: FormDeliveryStatus
+  attempts: number
+  maxAttempts: number
+  lastAttemptAt: string | null
+  nextRetryAt: string | null
+  error: string | null
+  responseStatus: number | null
+  skippedReason: string | null
+  alertedAt: string | null
+  createdAt: string
+  updatedAt: string
+  entryNumber?: number | null
+  formName?: string | null
+}
+
+export interface FormDeliveriesPage {
+  docs: FormDeliveryAttempt[]
+  total: number
+  page: number
+  pageSize: number
+}
+
+export interface FetchFormDeliveriesParams {
+  formId?: string
+  submissionId?: string
+  status?: string
+  page?: number
+  pageSize?: number
+}
+
+export async function fetchFormDeliveries(
+  params: FetchFormDeliveriesParams = {},
+): Promise<FormDeliveriesPage> {
+  const qs = new URLSearchParams()
+  if (params.formId) qs.set('formId', params.formId)
+  if (params.submissionId) qs.set('submissionId', params.submissionId)
+  if (params.status) qs.set('status', params.status)
+  if (params.page) qs.set('page', String(params.page))
+  if (params.pageSize) qs.set('pageSize', String(params.pageSize))
+  const suffix = qs.toString() ? `?${qs.toString()}` : ''
+  const res = await cmsApi<FormDeliveriesPage>(`/forms/deliveries${suffix}`)
+  throwIfError(res)
+  return res.data ?? { docs: [], total: 0, page: 1, pageSize: 25 }
+}
+
+export async function retryFormDelivery(
+  attemptId: string,
+): Promise<{ data?: FormDeliveryAttempt; error?: string }> {
+  const res = await cmsApi<FormDeliveryAttempt>(
+    `/forms/deliveries/${encodeURIComponent(attemptId)}/retry`,
+    { method: 'POST' },
+  )
+  return { data: res.data, error: res.error }
+}
+
+export async function fetchFailedDeliveryCount(formId?: string): Promise<number> {
+  const qs = formId ? `?formId=${encodeURIComponent(formId)}` : ''
+  const res = await cmsApi<{ count: number }>(`/forms/deliveries/failed-count${qs}`)
+  throwIfError(res)
+  return res.data?.count ?? 0
+}

package/src/router/admin-routes.ts

@@ -31,6 +31,7 @@ export const ADMIN_STATIC_ROUTE_PATTERNS: readonly string[] = [
   '/forms/:id/edit',
   '/forms/:id/submissions',
   '/forms/entries',
+  '/forms/deliveries',
   '/forms/new',
   '/media',
   '/page-builder/:id',

package/src/views/FormDeliveries.tsx

@@ -0,0 +1,214 @@
+'use client'
+
+/**
+ * Failed / retrying form delivery attempts (#675).
+ * Operators can see silent notify/webhook failures and retry without
+ * re-submitting the lead.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { AlertTriangle, RefreshCw, RotateCcw } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  fetchFormDeliveries,
+  retryFormDelivery,
+  type FormDeliveryAttempt,
+} from '../lib/forms-service.js'
+import {
+  FormsEmptyState,
+  FormsErrorState,
+  FormsLoading,
+  FormsPagination,
+} from '../components/forms/primitives.js'
+
+export interface FormDeliveriesProps {
+  onNavigate?: (path: string) => void
+}
+
+const PAGE_SIZE = 25
+
+function channelLabel(channel: string): string {
+  switch (channel) {
+    case 'email_notify':
+      return 'Admin email'
+    case 'email_autoresponder':
+      return 'Autoresponder'
+    case 'form_webhook':
+      return 'Webhook'
+    default:
+      return channel
+  }
+}
+
+function statusClass(status: string): string {
+  switch (status) {
+    case 'failed':
+      return 'bg-destructive/10 text-destructive'
+    case 'retrying':
+      return 'bg-accent text-accent-foreground'
+    case 'success':
+      return 'bg-primary/10 text-primary'
+    default:
+      return 'bg-muted text-muted-foreground'
+  }
+}
+
+export function FormDeliveries({ onNavigate }: FormDeliveriesProps) {
+  const [docs, setDocs] = useState<FormDeliveryAttempt[]>([])
+  const [total, setTotal] = useState(0)
+  const [page, setPage] = useState(1)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [retryingId, setRetryingId] = useState<string | null>(null)
+
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchFormDeliveries({
+        status: 'failed,retrying',
+        page,
+        pageSize: PAGE_SIZE,
+      })
+      setDocs(result.docs)
+      setTotal(result.total)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load deliveries')
+    } finally {
+      setLoading(false)
+    }
+  }, [page])
+
+  useEffect(() => {
+    void load()
+  }, [load])
+
+  async function handleRetry(id: string) {
+    setRetryingId(id)
+    const res = await retryFormDelivery(id)
+    setRetryingId(null)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data?.status === 'success') {
+      toast.success('Delivery succeeded')
+    } else if (res.data?.status === 'retrying') {
+      toast.message('Delivery still failing — scheduled for another retry')
+    } else {
+      toast.error(res.data?.error ?? 'Delivery failed again')
+    }
+    void load()
+  }
+
+  return (
+    <div className="flex h-full flex-col gap-4 p-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h1 className="text-foreground text-2xl font-medium">Deliveries</h1>
+          <p className="text-muted-foreground text-sm">
+            Failed or retrying notification and webhook deliveries. Leads stay saved — retry here
+            without re-submitting the form.
+          </p>
+        </div>
+        <button
+          type="button"
+          onClick={() => void load()}
+          className="border-border bg-card text-foreground hover:bg-muted inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-medium"
+          aria-label="Refresh deliveries"
+        >
+          <RefreshCw size={16} />
+          Refresh
+        </button>
+      </div>
+
+      {loading ? (
+        <FormsLoading />
+      ) : error ? (
+        <FormsErrorState message={error} onRetry={() => void load()} />
+      ) : docs.length === 0 ? (
+        <FormsEmptyState
+          icon={<AlertTriangle size={24} />}
+          title="No failed deliveries"
+          description="When a notify email or webhook fails after a submission is saved, it will appear here."
+        />
+      ) : (
+        <>
+          <div className="border-border overflow-hidden rounded-lg border">
+            <table className="w-full text-left text-sm" aria-label="Failed form deliveries">
+              <thead className="bg-muted/50 border-border border-b">
+                <tr>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Form</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Entry</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Channel</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Destination</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Status</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Error</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">Attempts</th>
+                  <th className="text-muted-foreground px-4 py-3 font-medium">
+                    <span className="sr-only">Actions</span>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {docs.map((row) => (
+                  <tr key={row.id} className="border-border border-b last:border-b-0">
+                    <td className="text-foreground px-4 py-3">
+                      <button
+                        type="button"
+                        className="hover:text-primary font-medium"
+                        onClick={() => onNavigate?.(`/forms/${row.formId}/submissions`)}
+                      >
+                        {row.formName ?? row.formId}
+                      </button>
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {row.entryNumber != null
+                        ? `#${String(row.entryNumber).padStart(5, '0')}`
+                        : '—'}
+                    </td>
+                    <td className="text-foreground px-4 py-3">{channelLabel(row.channel)}</td>
+                    <td
+                      className="text-muted-foreground max-w-[220px] truncate px-4 py-3"
+                      title={row.destination}
+                    >
+                      {row.destination}
+                    </td>
+                    <td className="px-4 py-3">
+                      <span
+                        className={`inline-flex rounded-md px-2 py-0.5 text-xs font-medium ${statusClass(row.status)}`}
+                      >
+                        {row.status}
+                      </span>
+                    </td>
+                    <td
+                      className="text-muted-foreground max-w-[240px] truncate px-4 py-3"
+                      title={row.error ?? row.skippedReason ?? undefined}
+                    >
+                      {row.error ?? row.skippedReason ?? '—'}
+                    </td>
+                    <td className="text-muted-foreground px-4 py-3">
+                      {row.attempts}/{row.maxAttempts}
+                    </td>
+                    <td className="px-4 py-3">
+                      <button
+                        type="button"
+                        disabled={retryingId === row.id}
+                        onClick={() => void handleRetry(row.id)}
+                        className="border-border bg-card text-foreground hover:bg-muted inline-flex h-9 items-center gap-1.5 rounded-md border px-2.5 text-sm font-medium disabled:opacity-50"
+                        aria-label={`Retry delivery to ${row.destination}`}
+                      >
+                        <RotateCcw size={14} />
+                        Retry
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+          <FormsPagination page={page} pageSize={PAGE_SIZE} total={total} onPageChange={setPage} />
+        </>
+      )}
+    </div>
+  )
+}

package/src/views/settings/CaptchaStatusCard.tsx

@@ -0,0 +1,119 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { ShieldCheck } from 'lucide-react'
+import { cmsApi } from '../../lib/api.js'
+import { SettingsCard } from './components.js'
+
+interface PublicCaptchaConfig {
+  provider: 'recaptcha' | 'turnstile' | 'none'
+  siteKey: string | null
+  enforce: boolean
+  onProviderError: 'fail-open' | 'fail-closed'
+  timeoutMs: number
+  scoreThreshold: number | null
+}
+
+function providerLabel(provider: string): string {
+  switch (provider) {
+    case 'turnstile':
+      return 'Cloudflare Turnstile'
+    case 'recaptcha':
+      return 'Google reCAPTCHA v3'
+    default:
+      return 'Not configured'
+  }
+}
+
+/**
+ * Read-only CAPTCHA status for Settings → Security (#676).
+ * Keys and policy are env / actuate.config driven — this surface shows what
+ * public form submit will enforce.
+ */
+export function CaptchaStatusCard() {
+  const [config, setConfig] = useState<PublicCaptchaConfig | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    void cmsApi<PublicCaptchaConfig>('/captcha/config')
+      .then((res) => {
+        if (cancelled) return
+        if (res.error || !res.data) {
+          setError(res.error ?? 'Unable to load captcha config')
+          return
+        }
+        setConfig(res.data)
+      })
+      .catch((err) => {
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'Unable to load captcha config')
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  return (
+    <div id="security-captcha">
+      <SettingsCard
+        title="Form CAPTCHA"
+        description="Server-side Turnstile / reCAPTCHA verification on public form submit. Provider keys stay in environment variables."
+      >
+        {error ? (
+          <p className="text-destructive text-sm">{error}</p>
+        ) : !config ? (
+          <p className="text-muted-foreground text-sm">Loading captcha status…</p>
+        ) : (
+          <div className="space-y-3 text-sm">
+            <div className="flex items-start gap-2">
+              <ShieldCheck
+                size={16}
+                className="text-muted-foreground mt-0.5 shrink-0"
+                aria-hidden
+              />
+              <div className="space-y-1">
+                <p className="text-foreground font-medium">{providerLabel(config.provider)}</p>
+                <p className="text-muted-foreground">
+                  {config.provider === 'none'
+                    ? 'Set TURNSTILE_* or RECAPTCHA_* env vars to enable. Honeypot spam protection still runs without captcha.'
+                    : `Site key configured${config.siteKey ? ` (${config.siteKey.slice(0, 8)}…)` : ''}.`}
+                </p>
+              </div>
+            </div>
+            <dl className="border-border grid gap-2 rounded-md border p-3 sm:grid-cols-2">
+              <div>
+                <dt className="text-muted-foreground">Enforce on submit</dt>
+                <dd className="text-foreground font-medium">{config.enforce ? 'On' : 'Off'}</dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">Provider outage policy</dt>
+                <dd className="text-foreground font-medium">{config.onProviderError}</dd>
+              </div>
+              <div>
+                <dt className="text-muted-foreground">Verify timeout</dt>
+                <dd className="text-foreground font-medium">{config.timeoutMs} ms</dd>
+              </div>
+              {config.scoreThreshold != null && (
+                <div>
+                  <dt className="text-muted-foreground">reCAPTCHA score threshold</dt>
+                  <dd className="text-foreground font-medium">{config.scoreThreshold}</dd>
+                </div>
+              )}
+            </dl>
+            <p className="text-muted-foreground text-xs">
+              Policy via <code className="text-foreground">CAPTCHA_ENFORCE</code>,{' '}
+              <code className="text-foreground">CAPTCHA_ON_PROVIDER_ERROR</code> (
+              <code className="text-foreground">fail-open</code> /{' '}
+              <code className="text-foreground">fail-closed</code>),{' '}
+              <code className="text-foreground">CAPTCHA_TIMEOUT_MS</code>, or{' '}
+              <code className="text-foreground">forms.captcha</code> in actuate.config. Token
+              failures always reject when enforce is on; only provider outages follow the outage
+              policy.
+            </p>
+          </div>
+        )}
+      </SettingsCard>
+    </div>
+  )
+}

package/src/views/settings/SecurityTab.tsx

@@ -12,6 +12,7 @@ import { AccessProtectionCard } from './AccessProtectionCard.js'
 import { AuthMfaCard } from './AuthMfaCard.js'
 import { SecretsAuditCard } from './SecretsAuditCard.js'
 import { SecurityStatusCard } from './SecurityStatusCard.js'
+import { CaptchaStatusCard } from './CaptchaStatusCard.js'
 import { SessionPolicyCard } from './SessionPolicyCard.js'
 import { useSecuritySettings } from './useSecuritySettings.js'
 
@@ -98,6 +99,8 @@ export function SecurityTab({
     <div className="space-y-4 pb-4">
       <SecurityStatusCard status={data.status} onNavigate={onNavigate} />
 
+      <CaptchaStatusCard />
+
       {issues.length > 0 && <SettingsValidationSummary issues={issues} />}
 
       {!canEdit && (