@actuate-media/cms-admin 0.21.1 → 0.23.0

package/src/__tests__/views/forms-list.render.test.tsx

@@ -0,0 +1,141 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// Drive the Forms list through a mocked forms-service so the test owns the
+// data and can assert filtering, search, the notify toggle, and the schema
+// drawer without a real backend.
+function makeForm(over: Record<string, unknown> = {}) {
+  return {
+    id: 'f1',
+    name: 'Contact Us',
+    slug: 'contact-us',
+    description: 'General contact and inquiries',
+    status: 'active',
+    fields: [
+      { id: 'c1', label: 'Full Name', key: 'name', type: 'text', required: true, sortOrder: 0 },
+      { id: 'c2', label: 'Email', key: 'email', type: 'email', required: true, sortOrder: 1 },
+    ],
+    fieldCount: 2,
+    totalEntries: 47,
+    unreadEntries: 8,
+    submissions: 47,
+    notifyEnabled: true,
+    lastEntryAt: new Date().toISOString(),
+    ...over,
+  }
+}
+
+const FORMS = [
+  makeForm(),
+  makeForm({
+    id: 'f2',
+    name: 'Event RSVP',
+    slug: 'event-rsvp',
+    description: 'Webinar registration',
+    status: 'draft',
+    totalEntries: 0,
+    unreadEntries: 0,
+    notifyEnabled: false,
+    lastEntryAt: null,
+  }),
+]
+
+const fetchForms = vi.fn(async () => FORMS)
+const fetchFormStats = vi.fn(async () => ({
+  totalForms: 2,
+  activeForms: 1,
+  totalEntries: 47,
+  unreadEntries: 8,
+}))
+const setNotifyEnabled = vi.fn(async (_id: string, _v: boolean) => ({
+  data: { notifyEnabled: false },
+}))
+const fetchFormSchema = vi.fn(async () => ({
+  fields: FORMS[0]!.fields,
+  activeVersionId: null,
+  versions: [],
+}))
+const fetchEmbedSettings = vi.fn(async () => ({}))
+const fetchNotificationSettings = vi.fn(async () => ({ enabled: true, recipients: [] }))
+
+vi.mock('../../lib/forms-service.js', () => ({
+  fetchForms: () => fetchForms(),
+  fetchFormStats: () => fetchFormStats(),
+  setNotifyEnabled: (id: string, v: boolean) => setNotifyEnabled(id, v),
+  fetchFormSchema: () => fetchFormSchema(),
+  saveFormSchema: vi.fn(async () => ({ data: {} })),
+  fetchEmbedSettings: () => fetchEmbedSettings(),
+  updateEmbedSettings: vi.fn(async () => ({ data: {} })),
+  fetchNotificationSettings: () => fetchNotificationSettings(),
+  updateNotificationSettings: vi.fn(async () => ({ data: {} })),
+}))
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn(), loading: vi.fn() } }))
+
+const { Forms } = await import('../../views/Forms.js')
+
+beforeEach(() => {
+  fetchForms.mockClear()
+  fetchFormStats.mockClear()
+  setNotifyEnabled.mockClear()
+})
+
+describe('Forms list', () => {
+  it('renders forms, summary chips, and field badges from service data', async () => {
+    render(<Forms onNavigate={() => {}} />)
+
+    expect(await screen.findByText('Contact Us')).toBeTruthy()
+    expect(screen.getByText('Event RSVP')).toBeTruthy()
+    // Summary chips reflect stats (not hardcoded).
+    expect(screen.getByText('total entries')).toBeTruthy()
+    // Field-type badges render per form.
+    expect(screen.getAllByText('EMAIL').length).toBeGreaterThan(0)
+  })
+
+  it('filters by status pill', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Draft', pressed: false }))
+
+    // Active-only form is filtered out; the draft remains.
+    await waitFor(() => {
+      expect(screen.queryByText('Contact Us')).toBeNull()
+      expect(screen.getByText('Event RSVP')).toBeTruthy()
+    })
+  })
+
+  it('searches across name and field labels', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.change(screen.getByLabelText('Search forms'), { target: { value: 'rsvp' } })
+
+    await waitFor(() => {
+      expect(screen.getByText('Event RSVP')).toBeTruthy()
+      expect(screen.queryByText('Contact Us')).toBeNull()
+    })
+  })
+
+  it('optimistically persists the notify toggle', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    const toggles = screen.getAllByLabelText(/Notifications for/)
+    fireEvent.click(toggles[0]!)
+
+    await waitFor(() => expect(setNotifyEnabled).toHaveBeenCalledWith('f1', false))
+  })
+
+  it('opens the schema drawer from the Schema action', async () => {
+    render(<Forms onNavigate={() => {}} />)
+    await screen.findByText('Contact Us')
+
+    fireEvent.click(screen.getAllByRole('button', { name: 'Schema' })[0]!)
+
+    await waitFor(() => expect(fetchFormSchema).toHaveBeenCalled())
+    // Drawer tabs are present.
+    expect(await screen.findByRole('tab', { name: 'Fields' })).toBeTruthy()
+  })
+})

package/src/components/forms/Drawer.tsx

@@ -0,0 +1,70 @@
+'use client'
+
+/**
+ * Right-side drawer built on Radix Dialog — focus-trapped, escape-closable,
+ * token-only styling. Shared by the Forms schema / entry-detail drawers.
+ */
+import * as Dialog from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import type { ReactNode } from 'react'
+import { btnGhostIcon } from './primitives.js'
+
+export function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  headerExtra,
+  footer,
+  children,
+  width = 'max-w-xl',
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: ReactNode
+  description?: ReactNode
+  /** Optional content rendered between the header text and the close button. */
+  headerExtra?: ReactNode
+  footer?: ReactNode
+  children: ReactNode
+  width?: string
+}) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="bg-foreground/40 motion-safe:animate-in motion-safe:fade-in fixed inset-0 z-50" />
+        <Dialog.Content
+          {...(description ? {} : { 'aria-describedby': undefined })}
+          className={`bg-card text-foreground fixed inset-y-0 right-0 z-50 flex w-full ${width} motion-safe:animate-in motion-safe:slide-in-from-right flex-col shadow-xl outline-none`}
+        >
+          <header className="border-border flex items-start justify-between gap-3 border-b px-5 py-4">
+            <div className="min-w-0">
+              <Dialog.Title className="text-foreground truncate text-lg font-medium">
+                {title}
+              </Dialog.Title>
+              {description && (
+                <Dialog.Description className="text-muted-foreground mt-0.5 truncate text-sm">
+                  {description}
+                </Dialog.Description>
+              )}
+            </div>
+            <div className="flex shrink-0 items-center gap-1">
+              {headerExtra}
+              <Dialog.Close asChild>
+                <button className={btnGhostIcon} aria-label="Close" data-shortcut="close">
+                  <X size={20} aria-hidden />
+                </button>
+              </Dialog.Close>
+            </div>
+          </header>
+          <div className="min-h-0 flex-1 overflow-y-auto px-5 py-4">{children}</div>
+          {footer && (
+            <footer className="border-border bg-card flex items-center justify-end gap-2 border-t px-5 py-4">
+              {footer}
+            </footer>
+          )}
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/forms/EmbedPanel.tsx

@@ -0,0 +1,173 @@
+'use client'
+
+/**
+ * Embed tab of the Form Schema drawer. Shows the public submission/schema
+ * endpoints and copy-paste embed snippets, and lets the editor restrict which
+ * origins may host the embedded form. Snippets are derived from the form slug;
+ * the live public endpoints land in a later phase (PR 5) but the paths shown
+ * here are the committed contract.
+ */
+import { Check, Copy } from 'lucide-react'
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import {
+  fetchEmbedSettings,
+  updateEmbedSettings,
+  type FormEmbedSettings,
+  type FormStatus,
+} from '../../lib/forms-service.js'
+import { FormsErrorState, FormsLoading, btnSecondary } from './primitives.js'
+
+function siteOrigin(): string {
+  if (typeof window !== 'undefined') return window.location.origin
+  return 'https://your-site.com'
+}
+
+export function EmbedPanel({
+  formId,
+  slug,
+  status,
+}: {
+  formId: string
+  slug: string
+  status: FormStatus
+}) {
+  const [settings, setSettings] = useState<FormEmbedSettings | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [domains, setDomains] = useState('')
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    let active = true
+    setLoading(true)
+    setError(null)
+    fetchEmbedSettings(formId)
+      .then((s) => {
+        if (!active) return
+        setSettings(s)
+        setDomains((s.allowedDomains ?? []).join('\n'))
+      })
+      .catch((e: unknown) => {
+        if (active) setError(e instanceof Error ? e.message : 'Failed to load embed settings')
+      })
+      .finally(() => {
+        if (active) setLoading(false)
+      })
+    return () => {
+      active = false
+    }
+  }, [formId])
+
+  const origin = siteOrigin()
+  const submitUrl = `${origin}/api/forms/${slug}/submit`
+  const schemaUrl = `${origin}/api/forms/${slug}/schema`
+  const embedUrl = `${origin}/forms/embed/${slug}`
+  const iframeSnippet = `<iframe src="${embedUrl}" title="${slug}" style="width:100%;border:0;" loading="lazy"></iframe>`
+  const scriptSnippet = `<div data-actuate-form="${slug}"></div>\n<script src="${origin}/api/forms/embed.js" async></script>`
+
+  async function saveDomains() {
+    setSaving(true)
+    const list = domains
+      .split('\n')
+      .map((d) => d.trim())
+      .filter(Boolean)
+    const res = await updateEmbedSettings(formId, { allowedDomains: list })
+    setSaving(false)
+    if (res.error) {
+      toast.error(res.error)
+      return
+    }
+    if (res.data) setSettings(res.data)
+    toast.success('Embed settings saved.')
+  }
+
+  if (loading) return <FormsLoading label="Loading embed settings…" />
+  if (error) return <FormsErrorState message={error} />
+
+  return (
+    <div className="space-y-5">
+      {status !== 'active' && (
+        <p className="border-warning/30 bg-warning/10 text-warning rounded-md border px-3 py-2 text-sm">
+          This form is <span className="font-medium">{status}</span> and won&apos;t accept public
+          submissions until it&apos;s set to Active.
+        </p>
+      )}
+
+      <CopyField label="Public submission endpoint" value={submitUrl} />
+      <CopyField label="Schema endpoint" value={schemaUrl} />
+      <CopyField label="Iframe embed" value={iframeSnippet} multiline />
+      <CopyField label="Script embed" value={scriptSnippet} multiline />
+
+      <div>
+        <label className="text-foreground mb-1 block text-sm font-medium">
+          Allowed domains
+          <span className="text-muted-foreground ml-1 font-normal">
+            (one per line — leave empty to allow any)
+          </span>
+        </label>
+        <textarea
+          rows={3}
+          value={domains}
+          onChange={(e) => setDomains(e.target.value)}
+          placeholder="example.com"
+          className="border-border bg-input-background text-foreground focus-visible:ring-ring w-full rounded-md border px-2.5 py-1.5 text-sm focus-visible:ring-2 focus-visible:outline-none"
+        />
+        <div className="mt-2 flex justify-end">
+          <button className={btnSecondary} onClick={saveDomains} disabled={saving}>
+            {saving ? 'Saving…' : 'Save domains'}
+          </button>
+        </div>
+      </div>
+      {settings === null && null}
+    </div>
+  )
+}
+
+function CopyField({
+  label,
+  value,
+  multiline = false,
+}: {
+  label: string
+  value: string
+  multiline?: boolean
+}) {
+  const [copied, setCopied] = useState(false)
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1500)
+    } catch {
+      toast.error('Copy failed — your browser blocked clipboard access.')
+    }
+  }
+
+  return (
+    <div>
+      <div className="mb-1 flex items-center justify-between">
+        <span className="text-foreground text-sm font-medium">{label}</span>
+        <button
+          type="button"
+          onClick={copy}
+          className="text-muted-foreground hover:text-foreground focus-visible:ring-ring inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-medium focus-visible:ring-2 focus-visible:outline-none"
+          aria-label={`Copy ${label}`}
+        >
+          {copied ? (
+            <Check className="h-3.5 w-3.5" aria-hidden />
+          ) : (
+            <Copy className="h-3.5 w-3.5" aria-hidden />
+          )}
+          {copied ? 'Copied' : 'Copy'}
+        </button>
+      </div>
+      <pre
+        className={`border-border bg-muted text-foreground overflow-x-auto rounded-md border px-2.5 py-2 font-mono text-xs ${multiline ? 'whitespace-pre-wrap' : 'whitespace-nowrap'}`}
+      >
+        {value}
+      </pre>
+    </div>
+  )
+}

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