@actuate-media/cms-admin 0.21.1 → 0.23.0

package/src/views/FormSubmissions.tsx

@@ -1,460 +1,595 @@
 'use client'
 
-import { useState, useMemo } from 'react'
-import {
-  ArrowLeft,
-  Download,
-  Trash2,
-  Search,
-  Globe,
-  ChevronDown,
-  ChevronUp,
-  MousePointerClick,
-  MapPin,
-  Smartphone,
-  Monitor,
-  Tablet,
-  ExternalLink,
-  Loader2,
-  AlertTriangle,
-} from 'lucide-react'
+/**
+ * Per-form submissions (entries) — a compact, token-only table wired to the
+ * real entries API (`lib/forms-service.ts`). Replaces the previous card list.
+ *
+ * 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 a detail drawer that opens on
+ * row click (marking the entry read). Loading / empty / filtered-empty / error
+ * states are all handled.
+ */
+import { useCallback, useEffect, useState, type ReactNode } from 'react'
+import { ArrowLeft, Download, Inbox, Search, Star, Trash2 } from 'lucide-react'
 import { toast } from 'sonner'
-import { sortByRelevance } from '../lib/search.js'
-import { useApiData } from '../lib/useApiData.js'
-
-interface Attribution {
-  source: string
-  medium: string
-  campaign: string
-  term: string
-  content: string
-  landingPage: string
-  referrer: string
-  deviceType: 'Desktop' | 'Mobile' | 'Tablet'
-  clickIds: Record<string, string | null>
-  capturedAt: string
-}
+import {
+  bulkUpdateEntries,
+  deleteEntry,
+  fetchEntries,
+  fetchEntryCounts,
+  fetchFormById,
+  updateEntry,
+  type EntryCounts,
+  type FetchFormEntriesParams,
+  type FormSubmission,
+} from '../lib/forms-service.js'
+import { emitFormsChanged, onFormsChanged } from '../lib/forms-events.js'
+import { EntryDetailDrawer } from '../components/forms/EntryDetailDrawer.js'
+import { ConfirmDialog } from '../components/ui/ConfirmDialog.js'
+import {
+  FormsEmptyState,
+  FormsErrorState,
+  FormsLoading,
+  FormsPagination,
+  SummaryChip,
+  btnGhostIcon,
+  btnSecondary,
+} from '../components/forms/primitives.js'
 
-interface Submission {
-  id: number
-  name: string
-  email: string
-  phone?: string
-  message: string
-  submittedAt: string
-  status: 'new' | 'read' | 'replied'
-  attribution: Attribution
+export interface FormSubmissionsProps {
+  formId: string
+  onNavigate?: (path: string) => void
 }
 
-function sourceColor(source: string): string {
-  const s = (source ?? '').toLowerCase()
-  if (s === 'google') return 'bg-blue-100 text-blue-800'
-  if (s === 'facebook' || s === 'meta') return 'bg-indigo-100 text-indigo-800'
-  if (s === 'linkedin') return 'bg-sky-100 text-sky-800'
-  if (s === 'bing') return 'bg-teal-100 text-teal-800'
-  if (s === '(direct)') return 'bg-gray-100 text-gray-800'
-  return 'bg-purple-100 text-purple-800'
+type StatusFilter = 'all' | 'unread' | 'starred' | 'archived'
+
+const FILTERS: { id: StatusFilter; label: string }[] = [
+  { id: 'all', label: 'All' },
+  { id: 'unread', label: 'Unread' },
+  { id: 'starred', label: 'Starred' },
+  { id: 'archived', label: 'Archived' },
+]
+
+const PAGE_SIZE = 25
+
+function filterToParams(filter: StatusFilter): Partial<FetchFormEntriesParams> {
+  switch (filter) {
+    case 'unread':
+      return { unread: true }
+    case 'starred':
+      return { starred: true }
+    case 'archived':
+      return { archived: true }
+    default:
+      return {}
+  }
 }
 
-function mediumColor(medium: string): string {
-  const m = (medium ?? '').toLowerCase()
-  if (m === 'cpc' || m === 'paid') return 'bg-orange-100 text-orange-800'
-  if (m === 'organic') return 'bg-green-100 text-green-800'
-  if (m === 'social') return 'bg-pink-100 text-pink-800'
-  if (m === 'email') return 'bg-yellow-100 text-yellow-800'
-  if (m === '(none)') return 'bg-gray-100 text-gray-600'
-  return 'bg-gray-100 text-gray-800'
+function formatDateTime(iso: string | null | undefined): string {
+  if (!iso) return '—'
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return '—'
+  return d.toLocaleString(undefined, {
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  })
 }
 
-function DeviceIcon({ type }: { type: string }) {
-  if (type === 'Mobile') return <Smartphone className="h-3.5 w-3.5" />
-  if (type === 'Tablet') return <Tablet className="h-3.5 w-3.5" />
-  return <Monitor className="h-3.5 w-3.5" />
+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
 }
 
-export interface FormSubmissionsProps {
-  formId: string
-  onNavigate?: (path: string) => void
+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 { data, loading, error, refetch } = useApiData<
-    Submission[] | { submissions: Submission[] }
-  >(`/forms/${formId}/submissions`)
-  const [searchQuery, setSearchQuery] = useState('')
-  const [filterStatus, setFilterStatus] = useState('all')
-  const [filterSource, setFilterSource] = useState('all')
-  const [expandedId, setExpandedId] = useState<number | null>(null)
-
-  const submissions = Array.isArray(data) ? data : (data?.submissions ?? [])
-
-  const filteredSubmissions = useMemo(() => {
-    let results = submissions.filter((s) => {
-      const matchesSearch =
-        (s.name ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (s.email ?? '').toLowerCase().includes(searchQuery.toLowerCase()) ||
-        (s.message ?? '').toLowerCase().includes(searchQuery.toLowerCase())
-      const matchesStatus = filterStatus === 'all' || s.status === filterStatus
-      const matchesSource = filterSource === 'all' || s.attribution?.source === filterSource
-      return matchesSearch && matchesStatus && matchesSource
-    })
+  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)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [search, setSearch] = useState('')
+  const [filter, setFilter] = useState<StatusFilter>('all')
+  const [page, setPage] = useState(1)
+  const [selected, setSelected] = useState<Set<string>>(new Set())
+  const [activeEntry, setActiveEntry] = useState<string | null>(null)
+  const [drawerOpen, setDrawerOpen] = useState(false)
+  const [confirmBulkDelete, setConfirmBulkDelete] = useState(false)
 
-    if (searchQuery.trim()) {
-      results = sortByRelevance(results, searchQuery, (s) => [s.name, s.email, s.message])
+  // Form metadata for the title (loads once).
+  useEffect(() => {
+    let cancelled = false
+    void fetchFormById(formId)
+      .then((form) => {
+        if (cancelled || !form) return
+        setFormName(form.name)
+        setFormSlug(form.slug)
+      })
+      .catch(() => {})
+    return () => {
+      cancelled = true
     }
-    return results
-  }, [submissions, searchQuery, filterStatus, filterSource])
+  }, [formId])
 
-  const uniqueSources = [...new Set(submissions.map((s) => s.attribution?.source ?? '(direct)'))]
+  const loadCounts = useCallback(() => {
+    void fetchEntryCounts({ formId })
+      .then(setCounts)
+      .catch(() => {})
+  }, [formId])
 
-  const sourceSummary = useMemo(() => {
-    const counts: Record<string, number> = {}
-    for (const s of submissions) {
-      const key = `${s.attribution?.source ?? '(direct)'} / ${s.attribution?.medium ?? '(none)'}`
-      counts[key] = (counts[key] ?? 0) + 1
+  const load = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const result = await fetchEntries({
+        formId,
+        search: search.trim() || undefined,
+        page,
+        pageSize: PAGE_SIZE,
+        ...filterToParams(filter),
+      })
+      setEntries(result.entries)
+      setTotal(result.total)
+      setSelected(new Set())
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load submissions')
+    } finally {
+      setLoading(false)
     }
-    return Object.entries(counts).sort(([, a], [, b]) => b - a)
-  }, [submissions])
+  }, [formId, search, filter, page])
 
-  const paidCount = submissions.filter((s) =>
-    ['cpc', 'paid'].includes(s.attribution?.medium ?? ''),
-  ).length
-  const organicCount = submissions.filter((s) => s.attribution?.medium === 'organic').length
+  useEffect(() => {
+    void load()
+  }, [load])
 
-  const handleExport = () => {
-    toast.success('Submissions exported to CSV (includes attribution data)')
-  }
+  useEffect(() => {
+    loadCounts()
+  }, [loadCounts])
 
-  if (loading) {
-    return (
-      <div className="flex h-64 items-center justify-center p-3 pr-6 sm:p-4 sm:pr-8">
-        <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
-      </div>
+  // Refresh when another surface (drawer, sidebar) signals a change.
+  useEffect(
+    () =>
+      onFormsChanged(() => {
+        loadCounts()
+      }),
+    [loadCounts],
+  )
+
+  const refresh = useCallback(() => {
+    void load()
+    loadCounts()
+  }, [load, loadCounts])
+
+  const openEntry = useCallback((id: string) => {
+    setActiveEntry(id)
+    setDrawerOpen(true)
+    // Reflect read state immediately in the row; the drawer persists it.
+    setEntries((cur) => cur.map((e) => (e.id === id ? { ...e, unread: false } : e)))
+  }, [])
+
+  const toggleStar = useCallback(async (entry: FormSubmission) => {
+    const next = !entry.starred
+    setEntries((cur) => cur.map((e) => (e.id === entry.id ? { ...e, starred: next } : e)))
+    const res = await updateEntry(entry.id, { starred: next })
+    if (res.error) {
+      setEntries((cur) => cur.map((e) => (e.id === entry.id ? { ...e, starred: !next } : e)))
+      toast.error(res.error)
+      return
+    }
+    emitFormsChanged()
+  }, [])
+
+  const allSelected = entries.length > 0 && selected.size === entries.length
+  const toggleSelectAll = useCallback(() => {
+    setSelected((cur) =>
+      cur.size === entries.length ? new Set() : new Set(entries.map((e) => e.id)),
     )
-  }
+  }, [entries])
 
-  return (
-    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
-      {error && (
-        <div className="mb-4 flex items-center gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-          <AlertTriangle className="h-5 w-5 shrink-0 text-red-600" />
-          <span className="flex-1 text-sm text-red-800">{error}</span>
-          <button
-            onClick={refetch}
-            className="rounded-lg border border-red-300 px-3 py-1 text-sm text-red-700 transition-colors hover:bg-red-100"
-          >
-            Retry
-          </button>
-        </div>
-      )}
+  const toggleSelect = useCallback((id: string) => {
+    setSelected((cur) => {
+      const next = new Set(cur)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }, [])
 
-      <div className="mb-4">
+  const bulkPatch = useCallback(
+    async (patch: { unread?: boolean; starred?: boolean; archived?: boolean }, label: string) => {
+      const ids = [...selected]
+      if (ids.length === 0) return
+      const res = await bulkUpdateEntries(ids, patch)
+      if (res.error) {
+        toast.error(res.error)
+        return
+      }
+      toast.success(`${ids.length} ${ids.length === 1 ? 'entry' : 'entries'} ${label}`)
+      emitFormsChanged()
+      refresh()
+    },
+    [selected, refresh],
+  )
+
+  const handleBulkDelete = useCallback(async () => {
+    const ids = [...selected]
+    if (ids.length === 0) return
+    const results = await Promise.allSettled(ids.map((id) => deleteEntry(id)))
+    const failed = results.filter((r) => r.status === 'rejected' || r.value.error).length
+    if (failed > 0) toast.error(`${failed} of ${ids.length} could not be deleted`)
+    else toast.success(`${ids.length} ${ids.length === 1 ? 'entry' : 'entries'} deleted`)
+    emitFormsChanged()
+    refresh()
+  }, [selected, refresh])
+
+  const showEmpty = !loading && !error && entries.length === 0
+  const isFiltered = filter !== 'all' || search.trim().length > 0
+
+  return (
+    <div className="space-y-5 p-6">
+      <div>
         <button
+          type="button"
           onClick={() => onNavigate?.('/forms')}
-          className="mb-3 inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-gray-900"
+          className="text-muted-foreground hover:text-foreground mb-3 inline-flex items-center gap-2 text-sm transition-colors"
         >
-          <ArrowLeft className="h-4 w-4" />
+          <ArrowLeft className="h-4 w-4" aria-hidden />
           Back to Forms
         </button>
-        <div className="flex items-center justify-between">
+        <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
           <div>
-            <h1 className="mb-1 text-2xl font-semibold text-gray-900">
-              Contact Form - Submissions
+            <h1 className="text-foreground text-2xl font-medium">
+              {formName ? `${formName} — Submissions` : 'Submissions'}
             </h1>
-            <p className="text-sm text-gray-600">
-              {filteredSubmissions.length} submission{filteredSubmissions.length !== 1 ? 's' : ''}
+            <p className="text-muted-foreground mt-1 text-sm">
+              {total} {total === 1 ? 'submission' : 'submissions'}
             </p>
           </div>
           <button
-            onClick={handleExport}
-            className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm text-white transition-colors hover:bg-blue-700"
+            type="button"
+            className={btnSecondary}
+            onClick={() => exportCsv(entries, formSlug)}
+            disabled={entries.length === 0}
           >
-            <Download className="h-4 w-4" />
+            <Download className="h-4 w-4" aria-hidden />
             Export CSV
           </button>
         </div>
       </div>
 
-      <div className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-5">
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="mb-1 text-xs text-gray-600">Total</div>
-          <div className="text-2xl font-semibold text-gray-900">{submissions.length}</div>
-        </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="mb-1 text-xs text-gray-600">New</div>
-          <div className="text-2xl font-semibold text-blue-600">
-            {submissions.filter((s) => s.status === 'new').length}
-          </div>
-        </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="mb-1 text-xs text-gray-600">Paid Traffic</div>
-          <div className="text-2xl font-semibold text-orange-600">{paidCount}</div>
-        </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="mb-1 text-xs text-gray-600">Organic</div>
-          <div className="text-2xl font-semibold text-green-600">{organicCount}</div>
-        </div>
-        <div className="rounded-lg border border-gray-200 bg-white p-4">
-          <div className="mb-1 text-xs text-gray-600">Top Source</div>
-          <div className="text-lg font-semibold text-gray-900">{sourceSummary[0]?.[0] ?? '—'}</div>
+      {counts && (
+        <div className="flex flex-wrap gap-2">
+          <SummaryChip value={counts.total} label="total" />
+          <SummaryChip
+            value={counts.unread}
+            label="unread"
+            tone={counts.unread > 0 ? 'destructive' : 'neutral'}
+          />
+          <SummaryChip value={counts.starred} label="starred" tone="warning" />
+          <SummaryChip value={counts.thisWeek} label="this week" />
         </div>
-      </div>
+      )}
 
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white p-4">
-        <h3 className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
-          <Globe className="h-4 w-4 text-blue-600" />
-          Lead Source Breakdown
-        </h3>
-        <div className="flex flex-wrap gap-2">
-          {sourceSummary.map(([label, count]) => (
-            <div key={label} className="flex items-center gap-2 rounded-lg bg-gray-50 px-3 py-1.5">
-              <span className="text-sm font-medium text-gray-800">{label}</span>
-              <span className="rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-800">
-                {count}
-              </span>
-            </div>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="relative w-full sm:max-w-xs">
+          <Search
+            className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+            aria-hidden
+          />
+          <input
+            type="search"
+            placeholder="Search submissions…"
+            value={search}
+            onChange={(e) => {
+              setSearch(e.target.value)
+              setPage(1)
+            }}
+            aria-label="Search submissions"
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus-visible:ring-2 focus-visible:outline-none"
+          />
+        </div>
+        <div className="flex gap-1" role="group" aria-label="Filter submissions">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              type="button"
+              onClick={() => {
+                setFilter(f.id)
+                setPage(1)
+              }}
+              aria-pressed={filter === f.id}
+              className={`rounded-full px-3 py-1.5 text-sm font-medium transition-colors ${
+                filter === f.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'text-muted-foreground hover:bg-accent hover:text-foreground'
+              }`}
+            >
+              {f.label}
+            </button>
           ))}
         </div>
       </div>
 
-      <div className="mb-4 rounded-lg border border-gray-200 bg-white">
-        <div className="flex flex-col gap-3 p-3 sm:flex-row">
-          <div className="relative flex-1">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
-            <input
-              type="text"
-              placeholder="Search submissions..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full rounded-lg border border-gray-300 py-2 pr-3 pl-9 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
-            />
-          </div>
-          <select
-            value={filterStatus}
-            onChange={(e) => setFilterStatus(e.target.value)}
-            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+      {selected.size > 0 && (
+        <div
+          className="border-border bg-accent/40 flex flex-wrap items-center gap-2 rounded-lg border px-3 py-2 text-sm"
+          role="region"
+          aria-label="Bulk actions"
+        >
+          <span className="text-foreground font-medium">{selected.size} selected</span>
+          <span className="bg-border mx-1 h-4 w-px" aria-hidden />
+          <button
+            type="button"
+            className="text-foreground hover:bg-accent rounded-md px-2 py-1 font-medium transition-colors"
+            onClick={() => void bulkPatch({ unread: false }, 'marked read')}
           >
-            <option value="all">All Status</option>
-            <option value="new">New</option>
-            <option value="read">Read</option>
-            <option value="replied">Replied</option>
-          </select>
-          <select
-            value={filterSource}
-            onChange={(e) => setFilterSource(e.target.value)}
-            className="rounded-lg border border-gray-300 px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none"
+            Mark read
+          </button>
+          <button
+            type="button"
+            className="text-foreground hover:bg-accent rounded-md px-2 py-1 font-medium transition-colors"
+            onClick={() => void bulkPatch({ starred: true }, 'starred')}
           >
-            <option value="all">All Sources</option>
-            {uniqueSources.map((src) => (
-              <option key={src} value={src}>
-                {src}
-              </option>
-            ))}
-          </select>
+            Star
+          </button>
+          <button
+            type="button"
+            className="text-foreground hover:bg-accent rounded-md px-2 py-1 font-medium transition-colors"
+            onClick={() =>
+              void bulkPatch(
+                { archived: filter !== 'archived' },
+                filter !== 'archived' ? 'archived' : 'unarchived',
+              )
+            }
+          >
+            {filter === 'archived' ? 'Unarchive' : 'Archive'}
+          </button>
+          <button
+            type="button"
+            className="text-destructive hover:bg-destructive/10 rounded-md px-2 py-1 font-medium transition-colors"
+            onClick={() => setConfirmBulkDelete(true)}
+          >
+            Delete
+          </button>
+          <button
+            type="button"
+            className="text-muted-foreground hover:text-foreground ml-auto rounded-md px-2 py-1 font-medium transition-colors"
+            onClick={() => setSelected(new Set())}
+          >
+            Clear
+          </button>
         </div>
-      </div>
+      )}
 
-      {filteredSubmissions.length === 0 ? (
-        <div className="rounded-lg border border-gray-200 bg-white p-8 text-center">
-          <p className="text-sm text-gray-500">No submissions yet</p>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {filteredSubmissions.map((submission) => {
-            const expanded = expandedId === submission.id
-            const attr = submission.attribution
-            const activeClickIds = Object.entries(attr.clickIds).filter(([, v]) => v)
-
-            return (
-              <div
-                key={submission.id}
-                className="rounded-lg border border-gray-200 bg-white transition-shadow hover:shadow-md"
+      {error ? (
+        <FormsErrorState message={error} onRetry={load} />
+      ) : loading ? (
+        <FormsLoading label="Loading submissions…" />
+      ) : showEmpty ? (
+        <FormsEmptyState
+          icon={<Inbox className="h-6 w-6" aria-hidden />}
+          title={isFiltered ? 'No submissions match your filters' : 'No submissions yet'}
+          description={
+            isFiltered
+              ? 'Try a different search term or status filter.'
+              : 'Submissions will appear here once your form starts receiving entries.'
+          }
+          action={
+            isFiltered ? (
+              <button
+                type="button"
+                onClick={() => {
+                  setSearch('')
+                  setFilter('all')
+                  setPage(1)
+                }}
+                className="text-primary text-sm font-medium hover:underline"
               >
-                <div className="p-4">
-                  <div className="mb-3 flex items-start justify-between">
-                    <div className="flex flex-1 items-start gap-3">
-                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-blue-500 to-purple-600 text-sm font-medium text-white">
-                        {submission.name.charAt(0)}
-                      </div>
-                      <div className="min-w-0 flex-1">
-                        <div className="mb-1 flex items-center gap-2">
-                          <h3 className="text-sm font-semibold text-gray-900">{submission.name}</h3>
+                Clear filters
+              </button>
+            ) : undefined
+          }
+        />
+      ) : (
+        <SubmissionsTable
+          entries={entries}
+          selected={selected}
+          allSelected={allSelected}
+          onToggleSelectAll={toggleSelectAll}
+          onToggleSelect={toggleSelect}
+          onOpen={openEntry}
+          onToggleStar={toggleStar}
+          footer={
+            <FormsPagination
+              page={page}
+              pageSize={PAGE_SIZE}
+              total={total}
+              onPageChange={setPage}
+              noun="submission"
+              label="Submissions pagination"
+            />
+          }
+        />
+      )}
+
+      <EntryDetailDrawer
+        entryId={activeEntry}
+        open={drawerOpen}
+        onOpenChange={setDrawerOpen}
+        onChanged={refresh}
+        onDeleted={() => refresh()}
+      />
+
+      <ConfirmDialog
+        open={confirmBulkDelete}
+        onClose={() => setConfirmBulkDelete(false)}
+        onConfirm={() => void handleBulkDelete()}
+        title={`Delete ${selected.size} ${selected.size === 1 ? 'submission' : 'submissions'}?`}
+        description="This permanently removes the selected submissions and any attached files. This cannot be undone."
+        confirmLabel="Delete"
+        destructive
+      />
+    </div>
+  )
+}
+
+function SubmissionsTable({
+  entries,
+  selected,
+  allSelected,
+  onToggleSelectAll,
+  onToggleSelect,
+  onOpen,
+  onToggleStar,
+  footer,
+}: {
+  entries: FormSubmission[]
+  selected: Set<string>
+  allSelected: boolean
+  onToggleSelectAll: () => void
+  onToggleSelect: (id: string) => void
+  onOpen: (id: string) => void
+  onToggleStar: (entry: FormSubmission) => void
+  footer?: ReactNode
+}) {
+  return (
+    <div className="border-border bg-card rounded-lg border">
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[720px] text-sm" aria-label="Submissions">
+          <thead>
+            <tr className="border-border text-muted-foreground border-b text-left text-xs">
+              <th scope="col" className="w-10 px-4 py-2.5">
+                <input
+                  type="checkbox"
+                  checked={allSelected}
+                  onChange={onToggleSelectAll}
+                  aria-label="Select all submissions"
+                  className="border-border text-primary focus-visible:ring-ring h-4 w-4 rounded"
+                />
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Sender
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium">
+                Submission
+              </th>
+              <th scope="col" className="px-4 py-2.5 font-medium whitespace-nowrap">
+                Submitted
+              </th>
+              <th scope="col" className="w-10 px-4 py-2.5 text-center font-medium">
+                <span className="sr-only">Starred</span>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {entries.map((entry) => {
+              const isSelected = selected.has(entry.id)
+              const name = entry.senderName || 'Anonymous'
+              return (
+                <tr
+                  key={entry.id}
+                  className={`border-border hover:bg-accent/40 group cursor-pointer border-b transition-colors last:border-b-0 ${
+                    isSelected ? 'bg-accent/30' : ''
+                  }`}
+                  onClick={() => onOpen(entry.id)}
+                >
+                  <td className="px-4 py-3" onClick={(e) => e.stopPropagation()}>
+                    <input
+                      type="checkbox"
+                      checked={isSelected}
+                      onChange={() => onToggleSelect(entry.id)}
+                      aria-label={`Select submission from ${name}`}
+                      className="border-border text-primary focus-visible:ring-ring h-4 w-4 rounded"
+                    />
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-3">
+                      <span
+                        className="bg-muted text-muted-foreground flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-medium"
+                        aria-hidden
+                      >
+                        {name.charAt(0).toUpperCase()}
+                      </span>
+                      <div className="min-w-0">
+                        <div className="flex items-center gap-2">
+                          {entry.unread && (
+                            <span
+                              className="bg-primary h-1.5 w-1.5 shrink-0 rounded-full"
+                              aria-label="Unread"
+                            />
+                          )}
                           <span
-                            className={`rounded-full px-2 py-0.5 text-xs font-medium ${submission.status === 'new' ? 'bg-blue-100 text-blue-800' : submission.status === 'read' ? 'bg-gray-100 text-gray-800' : 'bg-green-100 text-green-800'}`}
+                            className={`text-foreground truncate ${entry.unread ? 'font-semibold' : 'font-medium'}`}
                           >
-                            {submission.status}
+                            {name}
                           </span>
                         </div>
-                        <div className="mb-2 text-xs text-gray-600">
-                          {submission.email}
-                          {submission.phone ? ` · ${submission.phone}` : ''}
-                        </div>
-                        <p className="text-sm text-gray-700">{submission.message}</p>
-                        <div className="mt-2 text-xs text-gray-500">
-                          Submitted {submission.submittedAt}
-                        </div>
+                        {entry.senderEmail && (
+                          <span className="text-muted-foreground block truncate text-xs">
+                            {entry.senderEmail}
+                          </span>
+                        )}
                       </div>
                     </div>
-                    <button
-                      onClick={() => toast.success('Submission deleted')}
-                      className="rounded p-1.5 transition-colors hover:bg-gray-100"
-                      title="Delete"
-                    >
-                      <Trash2 className="h-4 w-4 text-red-600" />
-                    </button>
-                  </div>
-
-                  <div className="mt-3 flex flex-wrap items-center gap-2 border-t border-gray-100 pt-3">
-                    <span
-                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${sourceColor(attr.source)}`}
-                    >
-                      {attr.source}
-                    </span>
-                    <span className="text-xs text-gray-400">/</span>
-                    <span
-                      className={`rounded-full px-2 py-0.5 text-xs font-medium ${mediumColor(attr.medium)}`}
-                    >
-                      {attr.medium}
+                  </td>
+                  <td className="px-4 py-3">
+                    <span className="text-muted-foreground line-clamp-1 max-w-md">
+                      {entry.preview || '—'}
                     </span>
-                    {attr.campaign && (
-                      <span className="rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
-                        {attr.campaign}
-                      </span>
-                    )}
-                    <span className="flex items-center gap-1 text-xs text-gray-500">
-                      <DeviceIcon type={attr.deviceType} />
-                      {attr.deviceType}
-                    </span>
-                    {activeClickIds.length > 0 && (
-                      <span className="flex items-center gap-1 text-xs text-gray-500">
-                        <MousePointerClick className="h-3.5 w-3.5" />
-                        {activeClickIds.map(([k]) => k).join(', ')}
-                      </span>
-                    )}
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3 whitespace-nowrap">
+                    {formatDateTime(entry.submittedAt)}
+                  </td>
+                  <td className="px-4 py-3 text-center" onClick={(e) => e.stopPropagation()}>
                     <button
-                      onClick={() => setExpandedId(expanded ? null : submission.id)}
-                      className="ml-auto flex items-center gap-1 text-xs text-blue-600 transition-colors hover:text-blue-800"
+                      type="button"
+                      className={btnGhostIcon}
+                      aria-pressed={entry.starred}
+                      aria-label={entry.starred ? 'Unstar submission' : 'Star submission'}
+                      onClick={() => onToggleStar(entry)}
                     >
-                      {expanded ? (
-                        <ChevronUp className="h-3.5 w-3.5" />
-                      ) : (
-                        <ChevronDown className="h-3.5 w-3.5" />
-                      )}
-                      {expanded ? 'Hide' : 'Attribution'}
+                      <Star
+                        className={`h-4 w-4 ${entry.starred ? 'fill-warning text-warning' : ''}`}
+                        aria-hidden
+                      />
                     </button>
-                  </div>
-
-                  {expanded && (
-                    <div className="mt-3 space-y-4 rounded-lg border-t border-gray-100 bg-gray-50 p-4 pt-3 text-sm">
-                      <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
-                        <div>
-                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
-                            Traffic Source
-                          </h4>
-                          <div className="space-y-1.5">
-                            <div className="flex justify-between">
-                              <span className="text-gray-500">Source</span>
-                              <span className="font-medium text-gray-900">{attr.source}</span>
-                            </div>
-                            <div className="flex justify-between">
-                              <span className="text-gray-500">Medium</span>
-                              <span className="font-medium text-gray-900">{attr.medium}</span>
-                            </div>
-                            {attr.campaign && (
-                              <div className="flex justify-between">
-                                <span className="text-gray-500">Campaign</span>
-                                <span className="font-medium text-gray-900">{attr.campaign}</span>
-                              </div>
-                            )}
-                            {attr.term && (
-                              <div className="flex justify-between">
-                                <span className="text-gray-500">Keyword</span>
-                                <span className="font-medium text-gray-900">{attr.term}</span>
-                              </div>
-                            )}
-                            {attr.content && (
-                              <div className="flex justify-between">
-                                <span className="text-gray-500">Content</span>
-                                <span className="font-medium text-gray-900">{attr.content}</span>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                        <div>
-                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
-                            Page Context
-                          </h4>
-                          <div className="space-y-1.5">
-                            <div>
-                              <span className="text-xs text-gray-500">Landing Page</span>
-                              <div className="mt-0.5 flex items-center gap-1">
-                                <MapPin className="h-3 w-3 shrink-0 text-gray-400" />
-                                <span className="text-xs font-medium break-all text-gray-900">
-                                  {attr.landingPage}
-                                </span>
-                              </div>
-                            </div>
-                            {attr.referrer && (
-                              <div>
-                                <span className="text-xs text-gray-500">Referrer</span>
-                                <div className="mt-0.5 flex items-center gap-1">
-                                  <ExternalLink className="h-3 w-3 shrink-0 text-gray-400" />
-                                  <span className="text-xs font-medium break-all text-gray-900">
-                                    {attr.referrer}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                            <div className="flex justify-between">
-                              <span className="text-gray-500">Device</span>
-                              <span className="flex items-center gap-1 font-medium text-gray-900">
-                                <DeviceIcon type={attr.deviceType} />
-                                {attr.deviceType}
-                              </span>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                      {activeClickIds.length > 0 && (
-                        <div>
-                          <h4 className="mb-2 text-xs font-semibold tracking-wider text-gray-600 uppercase">
-                            Click IDs
-                          </h4>
-                          <div className="flex flex-wrap gap-2">
-                            {activeClickIds.map(([key, val]) => (
-                              <div
-                                key={key}
-                                className="rounded-lg border border-gray-200 bg-white px-2.5 py-1"
-                              >
-                                <span className="text-xs text-gray-500">{key}: </span>
-                                <span className="font-mono text-xs text-gray-800">
-                                  {String(val).slice(0, 20)}...
-                                </span>
-                              </div>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-                      <div className="text-xs text-gray-500">
-                        Attribution captured {attr.capturedAt}
-                      </div>
-                    </div>
-                  )}
-                </div>
-
-                <div className="flex items-center gap-2 border-t border-gray-200 px-4 py-3">
-                  <button className="rounded-lg bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-700">
-                    Reply
-                  </button>
-                  <button className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm transition-colors hover:bg-gray-50">
-                    Mark as Read
-                  </button>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      )}
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      {footer}
     </div>
   )
 }