@actuate-media/cms-admin 0.77.0 → 0.78.0

package/src/__tests__/views/form-submissions.render.test.tsx

@@ -59,6 +59,7 @@ const fetchEntryCounts = vi.fn(async (_p?: unknown) => ({
 }))
 const fetchEntry = vi.fn(async (_id?: string) => ({ entry: ENTRIES[0], fields: [] }))
 const updateEntry = vi.fn(async (_id?: string, _patch?: unknown) => ({ data: ENTRIES[0] }))
+const downloadEntriesExport = vi.fn(async (_opts?: unknown) => ({}))
 
 vi.mock('../../lib/forms-service.js', () => ({
   fetchFormById: (id?: string) => fetchFormById(id),
@@ -68,6 +69,7 @@ vi.mock('../../lib/forms-service.js', () => ({
   updateEntry: (id?: string, patch?: unknown) => updateEntry(id, patch),
   deleteEntry: vi.fn(async () => ({})),
   bulkUpdateEntries: vi.fn(async () => ({ data: { updated: 1 } })),
+  downloadEntriesExport: (opts?: unknown) => downloadEntriesExport(opts),
 }))
 
 vi.mock('../../lib/forms-events.js', () => ({
@@ -138,4 +140,19 @@ describe('FormSubmissions table', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Close entry details' }))
     expect(screen.queryByRole('region', { name: 'Entry details' })).toBeNull()
   })
+
+  it('downloads the server-side export scoped to this form', async () => {
+    downloadEntriesExport.mockClear()
+    render(<FormSubmissions formId="f1" onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    // Radix DropdownMenu opens on pointerdown (not click), which happy-dom
+    // doesn't synthesize from fireEvent.click — open via keyboard instead.
+    fireEvent.keyDown(screen.getByRole('button', { name: /Export/ }), { key: 'Enter' })
+    fireEvent.click(await screen.findByRole('menuitem', { name: /Excel/ }))
+
+    await waitFor(() =>
+      expect(downloadEntriesExport).toHaveBeenCalledWith({ formId: 'f1', format: 'xlsx' }),
+    )
+  })
 })

package/src/components/forms/ExportMenu.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * Export dropdown shared by the per-form Submissions view and the All
+ * Entries inbox. Downloads the *server-side* export (every page, decrypted
+ * values, attribution columns — up to 5,000 rows), not just the rows
+ * currently rendered, in CSV or Excel format.
+ */
+import { useState } from 'react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import { ChevronDown, Download, FileSpreadsheet, FileText } from 'lucide-react'
+import { toast } from 'sonner'
+import { adminPortalContainer } from '../../lib/portal-container.js'
+import { downloadEntriesExport, type EntriesExportFormat } from '../../lib/forms-service.js'
+import { btnSecondary } from './primitives.js'
+
+export interface ExportMenuProps {
+  /** Scope the export to one form; omit to export entries across all forms. */
+  formId?: string
+  /** Disable the trigger (e.g. no entries to export). */
+  disabled?: boolean
+}
+
+const itemClass =
+  'text-card-foreground data-highlighted:bg-accent flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none'
+
+export function ExportMenu({ formId, disabled }: ExportMenuProps) {
+  const [busy, setBusy] = useState(false)
+
+  const run = async (format: EntriesExportFormat) => {
+    setBusy(true)
+    try {
+      const res = await downloadEntriesExport({ formId, format })
+      if (res.error) toast.error(res.error)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button type="button" className={btnSecondary} disabled={disabled || busy}>
+          <Download className="h-4 w-4" aria-hidden />
+          {busy ? 'Exporting…' : 'Export'}
+          <ChevronDown className="h-4 w-4" aria-hidden />
+        </button>
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal container={adminPortalContainer()}>
+        <DropdownMenu.Content
+          align="end"
+          sideOffset={4}
+          className="border-border bg-card z-50 min-w-52 rounded-lg border p-1 shadow-md"
+        >
+          <DropdownMenu.Label className="text-muted-foreground px-2 py-1.5 text-xs">
+            Exports all submissions with attribution
+          </DropdownMenu.Label>
+          <DropdownMenu.Item onSelect={() => void run('csv')} className={itemClass}>
+            <FileText size={14} aria-hidden />
+            CSV (.csv)
+          </DropdownMenu.Item>
+          <DropdownMenu.Item onSelect={() => void run('xlsx')} className={itemClass}>
+            <FileSpreadsheet size={14} aria-hidden />
+            Excel (.xlsx)
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  )
+}

package/src/components/forms/FormEntryDetailPane.tsx

@@ -58,14 +58,88 @@ interface AttrRow {
   value: string | null | undefined
 }
 
-function attributionRows(entry: FormSubmission): AttrRow[] {
-  return [
-    { label: 'Source', value: entry.utmSource },
-    { label: 'Medium', value: entry.utmMedium },
-    { label: 'Campaign', value: entry.utmCampaign },
+const CHANNEL_LABELS: Record<string, string> = {
+  paid: 'Paid',
+  search_organic: 'Organic search',
+  social: 'Social',
+  email: 'Email',
+  ai: 'AI',
+  referral: 'Referral',
+  direct: 'Direct',
+}
+
+const CLICK_ID_LABELS: Record<string, string> = {
+  gclid: 'GCLID (Google Ads)',
+  fbclid: 'FBCLID (Meta)',
+  msclkid: 'MSCLKID (Microsoft)',
+  ttclid: 'TTCLID (TikTok)',
+  li_fat_id: 'LinkedIn click ID',
+  dclid: 'DCLID (Display)',
+  twclid: 'TWCLID (X Ads)',
+  rdt_cid: 'Reddit click ID',
+}
+
+const DEVICE_LABELS: Record<string, string> = {
+  desktop: 'Desktop',
+  tablet: 'Tablet',
+  mobile: 'Mobile',
+}
+
+function attrString(blob: Record<string, unknown>, key: string): string {
+  const v = blob[key]
+  return typeof v === 'string' ? v : ''
+}
+
+/**
+ * Build the attribution rows for an entry. Prefers the full client-captured
+ * blob (channel, click IDs, first/last touch) and falls back to the
+ * denormalized UTM columns for entries captured before attribution shipped.
+ * Exported for tests.
+ */
+export function buildAttributionRows(entry: FormSubmission): AttrRow[] {
+  const blob =
+    entry.attribution && typeof entry.attribution === 'object' && !Array.isArray(entry.attribution)
+      ? entry.attribution
+      : {}
+
+  const channel = attrString(blob, 'channel')
+  const referrerName = attrString(blob, 'referrerName')
+  const channelLabel = channel
+    ? `${CHANNEL_LABELS[channel] ?? channel}${referrerName ? ` · ${referrerName}` : ''}`
+    : ''
+
+  const rows: AttrRow[] = [
+    { label: 'Channel', value: channelLabel },
+    { label: 'Source', value: attrString(blob, 'source') || entry.utmSource },
+    { label: 'Medium', value: attrString(blob, 'medium') || entry.utmMedium },
+    { label: 'Campaign', value: attrString(blob, 'campaign') || entry.utmCampaign },
+    { label: 'Term', value: attrString(blob, 'term') },
+    { label: 'Content', value: attrString(blob, 'content') },
+    { label: 'Landing page', value: attrString(blob, 'landingPage') },
     { label: 'Page', value: entry.pageUrl },
-    { label: 'Referrer', value: entry.referrer },
-  ].filter((r) => r.value)
+    { label: 'Referrer', value: attrString(blob, 'referrer') || entry.referrer },
+    {
+      label: 'Device',
+      value: DEVICE_LABELS[attrString(blob, 'deviceType')] ?? '',
+    },
+    { label: 'First touch', value: formatDateTimeOrEmpty(attrString(blob, 'firstTouchAt')) },
+  ]
+
+  const clickIds = blob.clickIds
+  if (clickIds && typeof clickIds === 'object' && !Array.isArray(clickIds)) {
+    for (const [key, label] of Object.entries(CLICK_ID_LABELS)) {
+      const value = (clickIds as Record<string, unknown>)[key]
+      if (typeof value === 'string' && value) rows.push({ label, value })
+    }
+  }
+
+  return rows.filter((r) => r.value)
+}
+
+function formatDateTimeOrEmpty(iso: string): string {
+  if (!iso) return ''
+  const formatted = formatDateTime(iso)
+  return formatted === '—' ? '' : formatted
 }
 
 export interface FormEntryDetailPaneProps {
@@ -155,7 +229,7 @@ export function FormEntryDetailPane({
 
   const entry = detail?.entry
   const senderName = entry?.senderName || 'Anonymous'
-  const attrRows = entry ? attributionRows(entry) : []
+  const attrRows = entry ? buildAttributionRows(entry) : []
 
   return (
     <>

package/src/components/forms/WebhooksPanel.tsx

@@ -155,7 +155,11 @@ export function WebhooksPanel({ formId, formSlug }: { formId: string; formSlug:
               <li>
                 Map fields in your action step — submission values arrive under{' '}
                 <span className="font-mono text-xs">data.email</span>,{' '}
-                <span className="font-mono text-xs">data.name</span>, etc.
+                <span className="font-mono text-xs">data.name</span>, etc. Marketing attribution
+                (when captured) arrives under{' '}
+                <span className="font-mono text-xs">attribution.source</span>,{' '}
+                <span className="font-mono text-xs">attribution.medium</span>,{' '}
+                <span className="font-mono text-xs">attribution.channel</span>, etc.
               </li>
               <li>
                 Use event <span className="font-mono text-xs">form.submitted</span> only (spam hits

package/src/lib/forms-service.ts

@@ -10,7 +10,7 @@
  * `packages/cms-core/src/api/handlers.ts` (PR 2). Domain types are re-used
  * from `@actuate-media/cms-core` so the admin can never drift from the server.
  */
-import { cmsApi } from './api.js'
+import { cmsApi, getApiBase } from './api.js'
 import type {
   FormDefinition,
   FormSchemaVersion,
@@ -437,3 +437,47 @@ export async function bulkUpdateEntries(
   })
   return { data: res.data, error: res.error }
 }
+
+export type EntriesExportFormat = 'csv' | 'xlsx'
+
+/**
+ * Download the full server-side entries export (all pages, decrypted values,
+ * attribution columns — bounded server-side to 5,000 rows). Scoped to one
+ * form when `formId` is set, otherwise exports across all forms. Uses raw
+ * `fetch` because the response is a file, not the JSON envelope `cmsApi`
+ * unwraps.
+ */
+export async function downloadEntriesExport(
+  options: {
+    formId?: string
+    format?: EntriesExportFormat
+  } = {},
+): Promise<{ error?: string }> {
+  const format: EntriesExportFormat = options.format ?? 'csv'
+  const qs = new URLSearchParams({ format })
+  if (options.formId) qs.set('formId', options.formId)
+
+  let res: Response
+  try {
+    res = await fetch(`${getApiBase()}/forms/entries/export?${qs.toString()}`, {
+      credentials: 'include',
+    })
+  } catch (err) {
+    return { error: err instanceof Error ? err.message : 'Network error' }
+  }
+  if (!res.ok) {
+    const body = (await res.json().catch(() => ({}))) as { error?: string }
+    return { error: body.error || `Export failed (${res.status})` }
+  }
+
+  const blob = await res.blob()
+  const disposition = res.headers.get('content-disposition') ?? ''
+  const filename = /filename="([^"]+)"/.exec(disposition)?.[1] ?? `entries.${format}`
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+  return {}
+}

package/src/views/FormEntries.tsx

@@ -2,13 +2,13 @@
 
 /**
  * All Entries — a cross-form submissions inbox. Same token-only table, search,
- * status pills (All / Unread / Starred / Archived), bulk actions, CSV export,
- * pagination, and inline detail pane as the per-form Submissions view, plus a
- * Form filter and a Form column so editors can triage every form from one
- * place.
+ * status pills (All / Unread / Starred / Archived), bulk actions, server-side
+ * CSV/Excel export, pagination, and inline detail pane as the per-form
+ * Submissions view, plus a Form filter and a Form column so editors can
+ * triage every form from one place.
  */
 import { useCallback, useEffect, useState } from 'react'
-import { Download, Inbox, Search } from 'lucide-react'
+import { Inbox, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   bulkUpdateEntries,
@@ -25,6 +25,7 @@ import {
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
+import { ExportMenu } from '../components/forms/ExportMenu.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -33,7 +34,6 @@ import {
   FormsLoading,
   FormsPagination,
   SummaryChip,
-  btnSecondary,
 } from '../components/forms/primitives.js'
 
 export interface FormEntriesProps {
@@ -64,37 +64,6 @@ function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
   }
 }
 
-function csvEscape(value: unknown): string {
-  const s = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value)
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
-}
-
-function exportCsv(entries: FormSubmission[]) {
-  const dataKeys = [...new Set(entries.flatMap((e) => Object.keys(e.data ?? {})))]
-  const header = ['Entry', 'Form', 'Submitted', 'Name', 'Email', 'Phone', 'Status', ...dataKeys]
-  const lines = [header.map(csvEscape).join(',')]
-  for (const e of entries) {
-    const row = [
-      e.entryNumber ?? '',
-      e.formName ?? '',
-      e.submittedAt,
-      e.senderName ?? '',
-      e.senderEmail ?? '',
-      e.senderPhone ?? '',
-      e.unread ? 'unread' : 'read',
-      ...dataKeys.map((k) => e.data?.[k]),
-    ]
-    lines.push(row.map(csvEscape).join(','))
-  }
-  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = 'all-entries.csv'
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 export function FormEntries({ onNavigate }: FormEntriesProps) {
   const [entries, setEntries] = useState<FormSubmission[]>([])
   const [total, setTotal] = useState(0)
@@ -240,15 +209,7 @@ export function FormEntries({ onNavigate }: FormEntriesProps) {
             {total} {total === 1 ? 'submission' : 'submissions'} across your forms
           </p>
         </div>
-        <button
-          type="button"
-          className={btnSecondary}
-          onClick={() => exportCsv(entries)}
-          disabled={entries.length === 0}
-        >
-          <Download className="h-4 w-4" aria-hidden />
-          Export CSV
-        </button>
+        <ExportMenu formId={scopedFormId} disabled={counts !== null && counts.total === 0} />
       </div>
 
       {counts && (

package/src/views/FormSubmissions.tsx

@@ -6,12 +6,12 @@
  *
  * Features: summary chips, search + status pills (All / Unread / Starred /
  * Archived), row selection with bulk actions (mark read, star, archive,
- * delete), per-row star toggle, CSV export, and an inline detail pane that
- * opens on row click (marking the entry read). Loading / empty /
- * filtered-empty / error states are all handled.
+ * delete), per-row star toggle, server-side CSV/Excel export, and an inline
+ * detail pane that opens on row click (marking the entry read). Loading /
+ * empty / filtered-empty / error states are all handled.
  */
 import { useCallback, useEffect, useState } from 'react'
-import { ArrowLeft, Download, Inbox, Search } from 'lucide-react'
+import { ArrowLeft, Inbox, Search } from 'lucide-react'
 import { toast } from 'sonner'
 import {
   bulkUpdateEntries,
@@ -27,6 +27,7 @@ import {
 import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
 import { FormEntryDetailPane } from '../components/forms/FormEntryDetailPane.js'
 import { EntriesTable } from '../components/forms/EntriesTable.js'
+import { ExportMenu } from '../components/forms/ExportMenu.js'
 import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
 import { InspectorPane, SplitPaneLayout, SplitPaneList } from '../components/ui/InspectorPane.js'
 import {
@@ -35,7 +36,6 @@ import {
   FormsLoading,
   FormsPagination,
   SummaryChip,
-  btnSecondary,
 } from '../components/forms/primitives.js'
 
 export interface FormSubmissionsProps {
@@ -67,39 +67,8 @@ function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
   }
 }
 
-function csvEscape(value: unknown): string {
-  const s = value == null ? '' : typeof value === 'object' ? JSON.stringify(value) : String(value)
-  return /[",\n]/.test(s) ? `"${s.replace(/"/g, '""')}"` : s
-}
-
-function exportCsv(entries: FormSubmission[], formSlug: string) {
-  const dataKeys = [...new Set(entries.flatMap((e) => Object.keys(e.data ?? {})))]
-  const header = ['Entry', 'Submitted', 'Name', 'Email', 'Phone', 'Status', ...dataKeys]
-  const lines = [header.map(csvEscape).join(',')]
-  for (const e of entries) {
-    const row = [
-      e.entryNumber ?? '',
-      e.submittedAt,
-      e.senderName ?? '',
-      e.senderEmail ?? '',
-      e.senderPhone ?? '',
-      e.unread ? 'unread' : 'read',
-      ...dataKeys.map((k) => e.data?.[k]),
-    ]
-    lines.push(row.map(csvEscape).join(','))
-  }
-  const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement('a')
-  a.href = url
-  a.download = `${formSlug || 'form'}-submissions.csv`
-  a.click()
-  URL.revokeObjectURL(url)
-}
-
 export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
   const [formName, setFormName] = useState<string>('')
-  const [formSlug, setFormSlug] = useState<string>('')
   const [entries, setEntries] = useState<FormSubmission[]>([])
   const [total, setTotal] = useState(0)
   const [counts, setCounts] = useState<EntryCounts | null>(null)
@@ -119,7 +88,6 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
       .then((form) => {
         if (cancelled || !form) return
         setFormName(form.name)
-        setFormSlug(form.slug)
       })
       .catch(() => {})
     return () => {
@@ -261,15 +229,7 @@ export function FormSubmissions({ formId, onNavigate }: FormSubmissionsProps) {
               {total} {total === 1 ? 'submission' : 'submissions'}
             </p>
           </div>
-          <button
-            type="button"
-            className={btnSecondary}
-            onClick={() => exportCsv(entries, formSlug)}
-            disabled={entries.length === 0}
-          >
-            <Download className="h-4 w-4" aria-hidden />
-            Export CSV
-          </button>
+          <ExportMenu formId={formId} disabled={counts !== null && counts.total === 0} />
         </div>
       </div>