@actuate-media/cms-admin 0.22.0 → 0.24.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__/layout/sidebar-forms-submenu.render.test.tsx

@@ -0,0 +1,38 @@
+// @vitest-environment happy-dom
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+
+// The Forms nav item expands into a submenu: an "All Entries" child plus one
+// child per active form carrying its own unread badge. Mock the sidebar-counts
+// fetcher so the children are deterministic.
+// Distinct per-form counts so a child badge can't collide with the parent
+// total badge (8 + 5 = 13).
+const fetchFormsSidebarCounts = vi.fn(async () => [
+  { formId: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', unread: 8 },
+  { formId: 'f2', name: 'Project Inquiry', slug: 'project-inquiry', status: 'active', unread: 5 },
+])
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchFormsSidebarCounts: () => fetchFormsSidebarCounts(),
+}))
+
+const { Sidebar } = await import('../../layout/Sidebar.js')
+
+describe('Sidebar Forms submenu', () => {
+  it('renders All Entries plus a child per active form', async () => {
+    render(
+      <Sidebar
+        collapsed={false}
+        onToggleCollapse={() => {}}
+        currentPath="/forms"
+        onNavigate={() => {}}
+      />,
+    )
+
+    await waitFor(() => expect(screen.getByText('All Entries')).toBeTruthy())
+    // Per-form children (the Contact Us label also appears; scope to nav links).
+    expect(screen.getByText('Project Inquiry')).toBeTruthy()
+    // The form with unread submissions shows its own badge.
+    expect(screen.getByLabelText('8 unread')).toBeTruthy()
+  })
+})

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

@@ -0,0 +1,133 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the global All Entries inbox through a mocked forms-service so the test
+// owns the data and can assert the cross-form table (Form column + form
+// filter), status-pill refetches, and opening the detail drawer.
+function makeEntry(over: Record<string, unknown> = {}) {
+  return {
+    id: 'e1',
+    entryNumber: 1,
+    formId: 'f1',
+    formName: 'Contact Us',
+    formSlug: 'contact-us',
+    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,
+    formId: 'f2',
+    formName: 'Project Inquiry',
+    formSlug: 'project-inquiry',
+    senderName: 'Priya Nair',
+    senderEmail: 'priya@example.com',
+    preview: 'A question about pricing',
+    unread: false,
+  }),
+]
+
+const fetchForms = vi.fn(async () => [
+  { id: 'f1', name: 'Contact Us', slug: 'contact-us', status: 'active', fields: [] },
+  { id: 'f2', name: 'Project Inquiry', slug: 'project-inquiry', status: 'active', fields: [] },
+])
+const fetchEntries = vi.fn(async (_p?: unknown) => ({
+  entries: ENTRIES,
+  total: ENTRIES.length,
+  page: 1,
+  pageSize: 25,
+}))
+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', () => ({
+  fetchForms: () => fetchForms(),
+  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 { FormEntries } = await import('../../views/FormEntries.js')
+
+beforeEach(() => {
+  fetchForms.mockClear()
+  fetchEntries.mockClear()
+  fetchEntryCounts.mockClear()
+  fetchEntry.mockClear()
+})
+
+describe('FormEntries (All Entries)', () => {
+  it('renders cross-form entries with a Form column and filter', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Jordan Avery')).toBeTruthy()
+    expect(screen.getByText('Priya Nair')).toBeTruthy()
+    expect(screen.getByRole('table', { name: 'All entries' })).toBeTruthy()
+    // Form names appear (column values) and the filter is populated from fetchForms.
+    expect(screen.getByLabelText('Filter by form')).toBeTruthy()
+    await waitFor(() => expect(fetchForms).toHaveBeenCalled())
+  })
+
+  it('refetches scoped to a form when the form filter changes', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    await screen.findByText('Jordan Avery')
+
+    fireEvent.change(screen.getByLabelText('Filter by form'), { target: { value: 'f2' } })
+
+    await waitFor(() =>
+      expect(fetchEntries).toHaveBeenCalledWith(expect.objectContaining({ formId: 'f2' })),
+    )
+  })
+
+  it('refetches with the unread filter when the pill is clicked', async () => {
+    render(<FormEntries 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('opens the detail drawer when a row is clicked', async () => {
+    render(<FormEntries onNavigate={() => {}} />)
+    const row = await screen.findByText('Jordan Avery')
+
+    fireEvent.click(row)
+
+    await waitFor(() => expect(fetchEntry).toHaveBeenCalledWith('e1'))
+  })
+})

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/EntriesTable.tsx

@@ -0,0 +1,197 @@
+'use client'
+
+/**
+ * Shared, token-only submissions table used by both the per-form Submissions
+ * view and the global All Entries inbox. Presentational only: selection, star,
+ * and row-open are delegated to the parent; an optional Form column links each
+ * row back to its form when entries span multiple forms.
+ */
+import type { ReactNode } from 'react'
+import { Star } from 'lucide-react'
+import type { FormSubmission } from '../../lib/forms-service.js'
+import { btnGhostIcon } from './primitives.js'
+
+export function formatEntryDateTime(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',
+  })
+}
+
+export interface EntriesTableProps {
+  entries: FormSubmission[]
+  selected: Set<string>
+  allSelected: boolean
+  onToggleSelectAll: () => void
+  onToggleSelect: (id: string) => void
+  onOpen: (id: string) => void
+  onToggleStar: (entry: FormSubmission) => void
+  /** Show a Form column (used by the cross-form All Entries inbox). */
+  showForm?: boolean
+  /** Navigate to a form's submissions when its name is clicked (All Entries). */
+  onOpenForm?: (formId: string) => void
+  /** Accessible label for the table element. */
+  ariaLabel?: string
+  /** Footer row (e.g. pagination) rendered inside the bordered card. */
+  footer?: ReactNode
+}
+
+export function EntriesTable({
+  entries,
+  selected,
+  allSelected,
+  onToggleSelectAll,
+  onToggleSelect,
+  onOpen,
+  onToggleStar,
+  showForm = false,
+  onOpenForm,
+  ariaLabel = 'Submissions',
+  footer,
+}: EntriesTableProps) {
+  return (
+    <div className="border-border bg-card rounded-lg border">
+      <div className="overflow-x-auto">
+        <table
+          className={`w-full ${showForm ? 'min-w-[860px]' : 'min-w-[720px]'} text-sm`}
+          aria-label={ariaLabel}
+        >
+          <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>
+              {showForm && (
+                <th scope="col" className="px-4 py-2.5 font-medium whitespace-nowrap">
+                  Form
+                </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={`text-foreground truncate ${entry.unread ? 'font-semibold' : 'font-medium'}`}
+                          >
+                            {name}
+                          </span>
+                        </div>
+                        {entry.senderEmail && (
+                          <span className="text-muted-foreground block truncate text-xs">
+                            {entry.senderEmail}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </td>
+                  {showForm && (
+                    <td
+                      className="px-4 py-3 whitespace-nowrap"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      {onOpenForm ? (
+                        <button
+                          type="button"
+                          onClick={() => onOpenForm(entry.formId)}
+                          className="text-muted-foreground hover:text-primary focus-visible:ring-ring rounded text-sm focus-visible:ring-2 focus-visible:outline-none"
+                        >
+                          {entry.formName || '—'}
+                        </button>
+                      ) : (
+                        <span className="text-muted-foreground text-sm">
+                          {entry.formName || '—'}
+                        </span>
+                      )}
+                    </td>
+                  )}
+                  <td className="px-4 py-3">
+                    <span className="text-muted-foreground line-clamp-1 max-w-md">
+                      {entry.preview || '—'}
+                    </span>
+                  </td>
+                  <td className="text-muted-foreground px-4 py-3 whitespace-nowrap">
+                    {formatEntryDateTime(entry.submittedAt)}
+                  </td>
+                  <td className="px-4 py-3 text-center" onClick={(e) => e.stopPropagation()}>
+                    <button
+                      type="button"
+                      className={btnGhostIcon}
+                      aria-pressed={entry.starred}
+                      aria-label={entry.starred ? 'Unstar submission' : 'Star submission'}
+                      onClick={() => onToggleStar(entry)}
+                    >
+                      <Star
+                        className={`h-4 w-4 ${entry.starred ? 'fill-warning text-warning' : ''}`}
+                        aria-hidden
+                      />
+                    </button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+      </div>
+      {footer}
+    </div>
+  )
+}