@actuate-media/cms-admin 0.22.0 → 0.23.0

package/src/__tests__/components/forms-pagination.render.test.tsx

@@ -0,0 +1,49 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { FormsPagination } from '../../components/forms/primitives.js'
+
+describe('FormsPagination', () => {
+  it('renders nothing when results fit on a single page', () => {
+    const { container } = render(
+      <FormsPagination page={1} pageSize={25} total={10} onPageChange={() => {}} />,
+    )
+    expect(container.firstChild).toBeNull()
+  })
+
+  it('shows the result range and page controls across multiple pages', () => {
+    render(
+      <FormsPagination
+        page={1}
+        pageSize={10}
+        total={42}
+        onPageChange={() => {}}
+        noun="submission"
+      />,
+    )
+    expect(screen.getByText('1–10 of 42 submissions')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Next page' })).toBeTruthy()
+    expect(screen.getByLabelText('Previous page')).toHaveProperty('disabled', true)
+  })
+
+  it('advances and clamps page navigation', () => {
+    const onPageChange = vi.fn()
+    render(
+      <FormsPagination page={2} pageSize={10} total={42} onPageChange={onPageChange} noun="form" />,
+    )
+    // Range reflects the current page.
+    expect(screen.getByText('11–20 of 42 forms')).toBeTruthy()
+    fireEvent.click(screen.getByRole('button', { name: 'Next page' }))
+    expect(onPageChange).toHaveBeenCalledWith(3)
+    fireEvent.click(screen.getByLabelText('Previous page'))
+    expect(onPageChange).toHaveBeenCalledWith(1)
+  })
+
+  it('caps the last page so the final partial page shows the true total', () => {
+    render(
+      <FormsPagination page={5} pageSize={10} total={42} onPageChange={() => {}} noun="form" />,
+    )
+    expect(screen.getByText('41–42 of 42 forms')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Next page' })).toHaveProperty('disabled', true)
+  })
+})

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

@@ -0,0 +1,129 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the per-form submissions table through a mocked forms-service so the
+// test owns the data and can assert rendering, status-pill refetches, bulk
+// selection, and opening the detail drawer without a real backend.
+function makeEntry(over: Record<string, unknown> = {}) {
+  return {
+    id: 'e1',
+    entryNumber: 1,
+    formId: 'f1',
+    data: { name: 'Jordan Avery', email: 'jordan@example.com', message: 'Hello there' },
+    senderName: 'Jordan Avery',
+    senderEmail: 'jordan@example.com',
+    preview: 'Hello there',
+    unread: true,
+    starred: false,
+    archived: false,
+    spamStatus: 'clean',
+    submittedAt: new Date().toISOString(),
+    createdAt: new Date().toISOString(),
+    updatedAt: new Date().toISOString(),
+    ...over,
+  }
+}
+
+const ENTRIES = [
+  makeEntry(),
+  makeEntry({
+    id: 'e2',
+    entryNumber: 2,
+    senderName: 'Priya Nair',
+    senderEmail: 'priya@example.com',
+    preview: 'A question about pricing',
+    unread: false,
+  }),
+]
+
+const fetchFormById = vi.fn(async (_id?: string) => ({
+  id: 'f1',
+  name: 'Contact Us',
+  slug: 'contact-us',
+  status: 'active',
+  fields: [],
+}))
+const fetchEntries = vi.fn(async (_p?: unknown) => ({
+  entries: ENTRIES,
+  total: ENTRIES.length,
+  page: 1,
+  pageSize: 100,
+}))
+const fetchEntryCounts = vi.fn(async (_p?: unknown) => ({
+  total: 2,
+  unread: 1,
+  starred: 0,
+  thisWeek: 2,
+  byForm: { f1: 1 },
+}))
+const fetchEntry = vi.fn(async (_id?: string) => ({ entry: ENTRIES[0], fields: [] }))
+const updateEntry = vi.fn(async (_id?: string, _patch?: unknown) => ({ data: ENTRIES[0] }))
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormById: (id?: string) => fetchFormById(id),
+  fetchEntries: (p?: unknown) => fetchEntries(p),
+  fetchEntryCounts: (p?: unknown) => fetchEntryCounts(p),
+  fetchEntry: (id?: string) => fetchEntry(id),
+  updateEntry: (id?: string, patch?: unknown) => updateEntry(id, patch),
+  deleteEntry: vi.fn(async () => ({})),
+  bulkUpdateEntries: vi.fn(async () => ({ data: { updated: 1 } })),
+}))
+
+vi.mock('../../lib/forms-events.js', () => ({
+  onFormsChanged: () => () => {},
+  emitFormsChanged: vi.fn(),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { FormSubmissions } = await import('../../views/FormSubmissions.js')
+
+beforeEach(() => {
+  fetchEntries.mockClear()
+  fetchEntryCounts.mockClear()
+  fetchEntry.mockClear()
+})
+
+describe('FormSubmissions table', () => {
+  it('renders submissions as table rows with chips', async () => {
+    render(<FormSubmissions formId="f1" onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Jordan Avery')).toBeTruthy()
+    expect(screen.getByText('Priya Nair')).toBeTruthy()
+    // It's a table, not cards.
+    expect(screen.getByRole('table', { name: 'Submissions' })).toBeTruthy()
+    // Summary chips reflect counts.
+    expect(screen.getByText('this week')).toBeTruthy()
+  })
+
+  it('refetches with the unread filter when the pill is clicked', async () => {
+    render(<FormSubmissions formId="f1" onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Unread', pressed: false }))
+
+    await waitFor(() =>
+      expect(fetchEntries).toHaveBeenCalledWith(expect.objectContaining({ unread: true })),
+    )
+  })
+
+  it('shows the bulk action bar when a row is selected', async () => {
+    render(<FormSubmissions formId="f1" onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    fireEvent.click(screen.getByLabelText('Select submission from Jordan Avery'))
+
+    expect(await screen.findByText('1 selected')).toBeTruthy()
+    expect(screen.getByRole('button', { name: 'Mark read' })).toBeTruthy()
+  })
+
+  it('opens the detail drawer when a row is clicked', async () => {
+    render(<FormSubmissions formId="f1" onNavigate={() => {}} />)
+    const row = await screen.findByText('Jordan Avery')
+
+    fireEvent.click(row)
+
+    await waitFor(() => expect(fetchEntry).toHaveBeenCalledWith('e1'))
+  })
+})

package/src/components/forms/EntryDetailDrawer.tsx

@@ -0,0 +1,312 @@
+'use client'
+
+/**
+ * Entry detail drawer — shows a single submission rendered against the schema
+ * version it was captured with, plus sender, attribution, and per-entry
+ * actions (star, archive, mark unread, delete). Opening an unread entry marks
+ * it read. Token-only styling; built on the shared `Drawer`.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { Archive, ArchiveRestore, Loader2, Mail, Star, Trash2 } from 'lucide-react'
+import { toast } from 'sonner'
+import {
+  deleteEntry,
+  fetchEntry,
+  updateEntry,
+  type EntryDetail,
+  type FormField,
+  type FormSubmission,
+} from '../../lib/forms-service.js'
+import { emitFormsChanged } from '../../lib/forms-events.js'
+import { ConfirmDialog } from '../ui/ConfirmDialog.js'
+import { Drawer } from './Drawer.js'
+import { FormsErrorState, btnGhostIcon } from './primitives.js'
+
+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',
+  })
+}
+
+/** Render a stored value for display, coping with arrays/objects/booleans. */
+function displayValue(value: unknown): string {
+  if (value == null || value === '') return '—'
+  if (typeof value === 'boolean') return value ? 'Yes' : 'No'
+  if (Array.isArray(value)) return value.map((v) => String(v)).join(', ')
+  if (typeof value === 'object') return JSON.stringify(value)
+  return String(value)
+}
+
+interface AttrRow {
+  label: string
+  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 },
+    { label: 'Page', value: entry.pageUrl },
+    { label: 'Referrer', value: entry.referrer },
+  ].filter((r) => r.value)
+}
+
+export interface EntryDetailDrawerProps {
+  entryId: string | null
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Called after a mutation (star/archive/read/delete) so the list refreshes. */
+  onChanged?: () => void
+  /** Called specifically after a delete so the caller can drop the row/selection. */
+  onDeleted?: (id: string) => void
+}
+
+export function EntryDetailDrawer({
+  entryId,
+  open,
+  onOpenChange,
+  onChanged,
+  onDeleted,
+}: EntryDetailDrawerProps) {
+  const [detail, setDetail] = useState<EntryDetail | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [busy, setBusy] = useState(false)
+  const [confirmDelete, setConfirmDelete] = useState(false)
+
+  const notifyChanged = useCallback(() => {
+    emitFormsChanged()
+    onChanged?.()
+  }, [onChanged])
+
+  // Load the entry (and its schema) when the drawer opens, marking it read.
+  useEffect(() => {
+    if (!open || !entryId) return
+    let cancelled = false
+    setLoading(true)
+    setError(null)
+    setDetail(null)
+    void (async () => {
+      try {
+        const data = await fetchEntry(entryId)
+        if (cancelled) return
+        if (!data) {
+          setError('Entry not found')
+          return
+        }
+        setDetail(data)
+        // Mark read on open (fire-and-forget; refresh the list counts).
+        if (data.entry.unread) {
+          const res = await updateEntry(entryId, { unread: false })
+          if (!cancelled && !res.error) notifyChanged()
+        }
+      } catch (e) {
+        if (!cancelled) setError(e instanceof Error ? e.message : 'Failed to load entry')
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [open, entryId, notifyChanged])
+
+  const mutate = useCallback(
+    async (patch: { unread?: boolean; starred?: boolean; archived?: boolean }) => {
+      if (!entryId) return
+      setBusy(true)
+      const res = await updateEntry(entryId, patch)
+      setBusy(false)
+      if (res.error) {
+        toast.error(res.error)
+        return
+      }
+      setDetail((cur) => (cur ? { ...cur, entry: { ...cur.entry, ...patch } } : cur))
+      notifyChanged()
+    },
+    [entryId, notifyChanged],
+  )
+
+  const handleDelete = useCallback(async () => {
+    if (!entryId) return
+    setBusy(true)
+    const res = await deleteEntry(entryId)
+    setBusy(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    toast.success('Submission deleted')
+    notifyChanged()
+    onDeleted?.(entryId)
+    onOpenChange(false)
+  }, [entryId, notifyChanged, onDeleted, onOpenChange])
+
+  const entry = detail?.entry
+  const senderName = entry?.senderName || 'Anonymous'
+  const attrRows = entry ? attributionRows(entry) : []
+
+  return (
+    <>
+      <Drawer
+        open={open}
+        onOpenChange={onOpenChange}
+        title={entry ? `Entry${entry.entryNumber ? ` #${entry.entryNumber}` : ''}` : 'Entry'}
+        description={entry ? formatDateTime(entry.submittedAt) : undefined}
+        headerExtra={
+          entry ? (
+            <>
+              <button
+                type="button"
+                className={btnGhostIcon}
+                aria-pressed={entry.starred}
+                aria-label={entry.starred ? 'Unstar entry' : 'Star entry'}
+                disabled={busy}
+                onClick={() => void mutate({ starred: !entry.starred })}
+              >
+                <Star
+                  size={18}
+                  aria-hidden
+                  className={entry.starred ? 'fill-warning text-warning' : ''}
+                />
+              </button>
+              <button
+                type="button"
+                className={btnGhostIcon}
+                aria-pressed={entry.archived}
+                aria-label={entry.archived ? 'Unarchive entry' : 'Archive entry'}
+                disabled={busy}
+                onClick={() => void mutate({ archived: !entry.archived })}
+              >
+                {entry.archived ? (
+                  <ArchiveRestore size={18} aria-hidden />
+                ) : (
+                  <Archive size={18} aria-hidden />
+                )}
+              </button>
+            </>
+          ) : undefined
+        }
+        footer={
+          entry ? (
+            <>
+              <button
+                type="button"
+                className="text-destructive hover:bg-destructive/10 focus-visible:ring-ring inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                disabled={busy}
+                onClick={() => setConfirmDelete(true)}
+              >
+                <Trash2 size={16} aria-hidden />
+                Delete
+              </button>
+              <button
+                type="button"
+                className="border-border text-foreground hover:bg-accent focus-visible:ring-ring inline-flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:opacity-60"
+                disabled={busy}
+                onClick={() => void mutate({ unread: !entry.unread })}
+              >
+                <Mail size={16} aria-hidden />
+                Mark {entry.unread ? 'read' : 'unread'}
+              </button>
+            </>
+          ) : undefined
+        }
+      >
+        {loading ? (
+          <div className="flex h-40 items-center justify-center" role="status" aria-live="polite">
+            <Loader2 className="text-muted-foreground h-5 w-5 animate-spin" aria-hidden />
+            <span className="sr-only">Loading entry…</span>
+          </div>
+        ) : error ? (
+          <FormsErrorState message={error} />
+        ) : entry ? (
+          <div className="space-y-6">
+            <section className="space-y-1">
+              <h3 className="text-foreground text-sm font-medium">{senderName}</h3>
+              {entry.senderEmail && (
+                <a
+                  href={`mailto:${entry.senderEmail}`}
+                  className="text-primary block text-sm hover:underline"
+                >
+                  {entry.senderEmail}
+                </a>
+              )}
+              {entry.senderPhone && (
+                <span className="text-muted-foreground block text-sm">{entry.senderPhone}</span>
+              )}
+            </section>
+
+            <FieldValues entry={entry} fields={detail.fields} />
+
+            {attrRows.length > 0 && (
+              <section>
+                <h4 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
+                  Attribution
+                </h4>
+                <dl className="divide-border divide-y text-sm">
+                  {attrRows.map((row) => (
+                    <div key={row.label} className="flex justify-between gap-4 py-1.5">
+                      <dt className="text-muted-foreground shrink-0">{row.label}</dt>
+                      <dd className="text-foreground min-w-0 truncate text-right">{row.value}</dd>
+                    </div>
+                  ))}
+                </dl>
+              </section>
+            )}
+          </div>
+        ) : null}
+      </Drawer>
+
+      <ConfirmDialog
+        open={confirmDelete}
+        onClose={() => setConfirmDelete(false)}
+        onConfirm={() => void handleDelete()}
+        title="Delete submission?"
+        description="This permanently removes the submission and any attached files. This cannot be undone."
+        confirmLabel="Delete"
+        destructive
+      />
+    </>
+  )
+}
+
+/** Render the captured field values against the entry's schema. */
+function FieldValues({ entry, fields }: { entry: FormSubmission; fields: FormField[] }) {
+  // Prefer the schema order; fall back to whatever keys exist on the data.
+  const inputFields = fields.filter(
+    (f) => f.type !== 'divider' && f.type !== 'richtext' && f.type !== 'honeypot',
+  )
+  const rows: { key: string; label: string }[] = inputFields.length
+    ? inputFields.map((f) => ({ key: f.key, label: f.label }))
+    : Object.keys(entry.data ?? {}).map((k) => ({ key: k, label: k }))
+
+  if (rows.length === 0) {
+    return <p className="text-muted-foreground text-sm">No field data captured.</p>
+  }
+
+  return (
+    <section>
+      <h4 className="text-muted-foreground mb-2 text-xs font-medium tracking-wide uppercase">
+        Submission
+      </h4>
+      <dl className="space-y-3">
+        {rows.map((row) => (
+          <div key={row.key}>
+            <dt className="text-muted-foreground text-xs">{row.label}</dt>
+            <dd className="text-foreground mt-0.5 text-sm wrap-break-word whitespace-pre-wrap">
+              {displayValue(entry.data?.[row.key])}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </section>
+  )
+}

package/src/components/forms/NotificationsPanel.tsx

@@ -213,7 +213,7 @@ function ToggleRow({
         checked={checked}
         onCheckedChange={onChange}
         aria-label={label}
-        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
+        className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
       >
         <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
       </Switch.Root>

package/src/components/forms/primitives.tsx

@@ -8,7 +8,7 @@
  * track light/dark mode and brand overrides automatically.
  */
 import type { ReactNode } from 'react'
-import { AlertTriangle, Loader2 } from 'lucide-react'
+import { AlertTriangle, ChevronLeft, ChevronRight, Loader2 } from 'lucide-react'
 import type { FormFieldType, FormStatus } from '../../lib/forms-service.js'
 
 // ─── Field-type badges ─────────────────────────────────────────────────────
@@ -188,6 +188,106 @@ export function FormsErrorState({ message, onRetry }: { message: string; onRetry
   )
 }
 
+// ─── Pagination ────────────────────────────────────────────────────────────
+
+/**
+ * Return up to 7 page-control entries: a sliding window around the current
+ * page with ellipsis markers, so the footer stays narrow on large datasets.
+ */
+function pageWindow(current: number, total: number): Array<number | 'gap'> {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  const out: Array<number | 'gap'> = [1]
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+  if (start > 2) out.push('gap')
+  for (let i = start; i <= end; i++) out.push(i)
+  if (end < total - 1) out.push('gap')
+  out.push(total)
+  return out
+}
+
+/**
+ * Token-only pagination footer matching the Posts/Pages list styling. Renders
+ * a "start–end of total" summary plus prev / numbered / next controls. Hidden
+ * when there is a single page of results.
+ */
+export function FormsPagination({
+  page,
+  pageSize,
+  total,
+  onPageChange,
+  noun = 'result',
+  label = 'Pagination',
+}: {
+  page: number
+  pageSize: number
+  total: number
+  onPageChange: (page: number) => void
+  /** Singular noun for the summary (pluralised automatically). */
+  noun?: string
+  /** Accessible label for the nav landmark. */
+  label?: string
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize))
+  if (totalPages <= 1) return null
+  const start = total === 0 ? 0 : (page - 1) * pageSize + 1
+  const end = Math.min(total, page * pageSize)
+
+  return (
+    <div className="border-border flex items-center justify-between border-t px-4 py-3 text-sm">
+      <span className="text-muted-foreground tabular-nums">
+        {start}–{end} of {total} {noun}
+        {total === 1 ? '' : 's'}
+      </span>
+      <nav className="flex items-center gap-1" aria-label={label}>
+        <button
+          type="button"
+          onClick={() => onPageChange(Math.max(1, page - 1))}
+          disabled={page === 1}
+          aria-label="Previous page"
+          className="border-border bg-background text-foreground hover:bg-accent focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <ChevronLeft className="h-4 w-4" aria-hidden />
+        </button>
+        {pageWindow(page, totalPages).map((p, idx) =>
+          p === 'gap' ? (
+            <span
+              key={`gap-${idx}`}
+              aria-hidden
+              className="text-muted-foreground inline-flex h-8 w-8 items-center justify-center"
+            >
+              …
+            </span>
+          ) : (
+            <button
+              key={p}
+              type="button"
+              onClick={() => onPageChange(p)}
+              aria-current={p === page ? 'page' : undefined}
+              className={`focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md text-sm tabular-nums transition-colors focus-visible:ring-2 focus-visible:outline-none ${
+                p === page
+                  ? 'bg-primary text-primary-foreground'
+                  : 'border-border bg-background text-foreground hover:bg-accent border'
+              }`}
+            >
+              {p}
+            </button>
+          ),
+        )}
+        <button
+          type="button"
+          onClick={() => onPageChange(Math.min(totalPages, page + 1))}
+          disabled={page === totalPages}
+          aria-label="Next page"
+          className="border-border bg-background text-foreground hover:bg-accent focus-visible:ring-ring inline-flex h-8 w-8 items-center justify-center rounded-md border transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
+        >
+          <ChevronRight className="h-4 w-4" aria-hidden />
+        </button>
+      </nav>
+    </div>
+  )
+}
+
 // ─── Button helpers (token-only) ─────────────────────────────────────────
 
 export const btnPrimary =