@actuate-media/cms-admin 0.23.0 → 0.25.0

package/src/__tests__/views/page-builder-form-picker.render.test.tsx

@@ -0,0 +1,54 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import type { FieldDefinition } from '@actuate-media/cms-core'
+
+const cmsApi = vi.fn()
+vi.mock('../../lib/api.js', () => ({ cmsApi: (...args: unknown[]) => cmsApi(...args) }))
+
+const { RelationshipField } = await import('../../views/page-builder/RelationshipField.js')
+
+const formField: FieldDefinition = {
+  type: 'relationship',
+  label: 'Form',
+  relationTo: 'forms',
+} as FieldDefinition
+
+beforeEach(() => {
+  cmsApi.mockReset()
+})
+
+describe('RelationshipField (form block picker)', () => {
+  it('loads forms and lets the editor pick one by id', async () => {
+    cmsApi.mockResolvedValue({
+      data: [
+        { id: 'f1', name: 'Contact Us', slug: 'contact-us' },
+        { id: 'f2', name: 'Event RSVP', slug: 'event-rsvp' },
+      ],
+      status: 200,
+    })
+    const onChange = vi.fn()
+    render(<RelationshipField definition={formField} value="" onChange={onChange} label="Form" />)
+
+    await waitFor(() => expect(screen.getByText('Contact Us')).toBeTruthy())
+    expect(cmsApi).toHaveBeenCalledWith('/forms')
+    expect(screen.getByText('Event RSVP')).toBeTruthy()
+
+    fireEvent.change(screen.getByLabelText('Form'), { target: { value: 'f2' } })
+    expect(onChange).toHaveBeenCalledWith('f2')
+  })
+
+  it('shows an empty hint when the collection has no items', async () => {
+    cmsApi.mockResolvedValue({ data: [], status: 200 })
+    render(<RelationshipField definition={formField} value="" onChange={vi.fn()} label="Form" />)
+    await waitFor(() => expect(screen.getByText('No forms found.')).toBeTruthy())
+  })
+
+  it('degrades to a plain id input when the collection cannot be loaded', async () => {
+    cmsApi.mockResolvedValue({ error: 'boom', status: 500 })
+    render(<RelationshipField definition={formField} value="f9" onChange={vi.fn()} label="Form" />)
+    await waitFor(() =>
+      expect((screen.getByPlaceholderText('Enter forms id…') as HTMLInputElement).value).toBe('f9'),
+    )
+  })
+})

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