@actuate-media/cms-admin 0.76.7 → 0.78.0

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>