@actuate-media/cms-admin 0.22.0 → 0.24.0

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 =

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