@actuate-media/cms-admin 0.23.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actuate-media/cms-admin",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/actuate-media/actuatecms.git",

package/src/AdminRoot.tsx

@@ -13,6 +13,7 @@ import { Settings } from './views/Settings.js'
 import { Forms } from './views/Forms.js'
 import { FormEditor } from './views/FormEditor.js'
 import { FormSubmissions } from './views/FormSubmissions.js'
+import { FormEntries } from './views/FormEntries.js'
 import { SEO } from './views/SEO.js'
 import { ScriptTags } from './views/ScriptTags.js'
 import { ScriptTagEditor } from './views/ScriptTagEditor.js'
@@ -365,6 +366,9 @@ function AdminShell({
     if (matchRoute('/forms/new')) {
       return <FormEditor onNavigate={navigate} />
     }
+    if (matchRoute('/forms/entries')) {
+      return <FormEntries onNavigate={navigate} />
+    }
     const formEdit = matchRoute('/forms/:id/edit')
     if (formEdit?.id) {
       return <FormEditor formId={formEdit.id} onNavigate={navigate} />

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/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>
+  )
+}

package/src/layout/Sidebar.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useRef, useState, type ReactNode } from 'react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { useTheme } from '../components/ThemeProvider.js'
-import { fetchFormsSidebarCounts } from '../lib/forms-service.js'
+import { fetchFormsSidebarCounts, type FormsSidebarCount } from '../lib/forms-service.js'
 import { onFormsChanged } from '../lib/forms-events.js'
 import {
   LayoutDashboard,
@@ -14,6 +14,7 @@ import {
   ChevronLeft,
   ChevronDown,
   ClipboardList,
+  Inbox,
   Search as SearchIcon,
   Briefcase,
   FolderOpen,
@@ -177,8 +178,8 @@ export function Sidebar({
   onNavigate,
   config,
 }: SidebarProps) {
-  const formsUnread = useFormsUnread()
-  const navItems = applyFormsBadge(buildNavItems(config), formsUnread)
+  const formsSidebar = useFormsSidebar()
+  const navItems = applyFormsNav(buildNavItems(config), formsSidebar)
 
   return (
     <aside
@@ -228,21 +229,33 @@ export function Sidebar({
 
 // ─── Dynamic Forms unread badge ───────────────────────────────────────────
 
+interface FormsSidebarState {
+  /** Total unread submissions across active forms (parent badge). */
+  totalUnread: number
+  /** Per-form unread counts, used to build the Forms submenu children. */
+  forms: FormsSidebarCount[]
+}
+
 /**
- * Live total of unread submissions across active forms, surfaced on the Forms
- * nav item. Refreshes on mount and whenever a forms/entries mutation fires the
- * shared event (mark read, archive, notify toggle, …). Best-effort: a failed
- * fetch simply leaves the badge unset rather than surfacing an error in nav.
+ * Live unread counts for the Forms submenu: a total surfaced on the Forms nav
+ * item plus per-form counts that drive the "All Entries" + per-form children.
+ * Refreshes on mount and whenever a forms/entries mutation fires the shared
+ * event (mark read, archive, notify toggle, …). Best-effort: a failed fetch
+ * keeps the last known value rather than surfacing an error in nav.
  */
-function useFormsUnread(): number {
-  const [unread, setUnread] = useState(0)
+function useFormsSidebar(): FormsSidebarState {
+  const [state, setState] = useState<FormsSidebarState>({ totalUnread: 0, forms: [] })
 
   useEffect(() => {
     let active = true
     const load = () => {
       fetchFormsSidebarCounts()
         .then((counts) => {
-          if (active) setUnread(counts.reduce((sum, c) => sum + (c.unread ?? 0), 0))
+          if (!active) return
+          setState({
+            totalUnread: counts.reduce((sum, c) => sum + (c.unread ?? 0), 0),
+            forms: counts,
+          })
         })
         .catch(() => {
           /* keep the last known value; nav must never break on a fetch error */
@@ -256,13 +269,32 @@ function useFormsUnread(): number {
     }
   }, [])
 
-  return unread
+  return state
 }
 
-/** Return a copy of the nav tree with the live unread count on the Forms item. */
-function applyFormsBadge(items: NavItem[], unread: number): NavItem[] {
-  if (unread <= 0) return items
-  return items.map((item) => (item.path === '/forms' ? { ...item, badge: unread } : item))
+/**
+ * Return a copy of the nav tree with the Forms item expanded into a submenu:
+ * a total-unread badge on the parent, an "All Entries" child, and one child
+ * per active form carrying its own unread badge.
+ */
+function applyFormsNav(items: NavItem[], state: FormsSidebarState): NavItem[] {
+  return items.map((item) => {
+    if (item.path !== '/forms') return item
+    const children: NavItem[] = [
+      { path: '/forms/entries', label: 'All Entries', icon: Inbox },
+      ...state.forms.map((f) => ({
+        path: `/forms/${f.formId}/submissions`,
+        label: f.name,
+        icon: ClipboardList,
+        badge: f.unread,
+      })),
+    ]
+    return {
+      ...item,
+      badge: state.totalUnread > 0 ? state.totalUnread : undefined,
+      children,
+    }
+  })
 }
 
 // ─── Rendering ──────────────────────────────────────────────────────────────
@@ -377,6 +409,14 @@ function NavSection({ item, ctx }: { item: NavItem; ctx: NavRenderContext }) {
           <Icon className="h-5 w-5 shrink-0" aria-hidden />
           <span className="truncate text-sm font-medium">{item.label}</span>
         </button>
+        {!!item.badge && item.badge > 0 && (
+          <span
+            className="bg-destructive text-destructive-foreground mr-1 inline-flex min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+            aria-label={`${item.badge} unread`}
+          >
+            {item.badge > 99 ? '99+' : item.badge}
+          </span>
+        )}
         <button
           onClick={() => setOpen((v) => !v)}
           className="text-sidebar-foreground/55 hover:text-sidebar-foreground mr-1 flex shrink-0 items-center rounded-md p-1.5 transition-colors"
@@ -547,11 +587,21 @@ function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }
                 ? 'bg-sidebar-accent text-sidebar-primary'
                 : 'text-sidebar-foreground hover:bg-sidebar-accent'
             }`}
-            aria-label={item.label}
+            aria-label={
+              item.badge && item.badge > 0 ? `${item.label} (${item.badge} unread)` : item.label
+            }
             title={item.label}
             aria-current={isActive ? 'page' : undefined}
           >
-            <Icon className="h-5 w-5 shrink-0" aria-hidden />
+            <span className="relative flex shrink-0 items-center">
+              <Icon className="h-5 w-5 shrink-0" aria-hidden />
+              {!!item.badge && item.badge > 0 && (
+                <span
+                  className="bg-destructive absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full"
+                  aria-hidden
+                />
+              )}
+            </span>
           </button>
         </DropdownMenu.Trigger>
       </div>
@@ -593,6 +643,14 @@ function CollapsedFlyout({ item, ctx }: { item: NavItem; ctx: NavRenderContext }
               >
                 <ChildIcon className="text-muted-foreground h-4 w-4 shrink-0" aria-hidden />
                 <span className="truncate">{child.label}</span>
+                {!!child.badge && child.badge > 0 && (
+                  <span
+                    className="bg-destructive text-destructive-foreground ml-auto inline-flex min-w-5 items-center justify-center rounded-full px-1.5 py-0.5 text-xs font-medium tabular-nums"
+                    aria-label={`${child.badge} unread`}
+                  >
+                    {child.badge > 99 ? '99+' : child.badge}
+                  </span>
+                )}
               </DropdownMenu.Item>
             )
           })}