feat(forms): builder UI, management pages, and public fill page (Phase 3)

- components/forms/form-renderer.tsx: one controlled renderer for all 8 field types, shared by the builder preview and the public page - components/forms/form-builder.tsx: easy builder — label-only field creation (keys auto-derived and de-duped at save), one-click type buttons, up/down reordering, inline options editor, live preview; edit mode adds publish/close/draft/delete and copy-public-link - /forms directory, /forms/new, /forms/[id]/edit, /forms/[id]/results (CSV download). Server-gated by lib/forms-guard.ts (forms.manage via the same RPC the RLS uses; RLS remains the real boundary) - public app/f/[slug] (outside the app group): getPublicForm serves only published public forms — members-only forms are never exposed there; waiver consent, anon email capture, signed-in gate for public_auth, thank-you state - sidebar "Forms & waivers" link; sonner toasts (codebase convention) - ARCHITECTURE + HANDOFF updated 285/285 tests, build clean, all four routes compiled. No deploy.
2026-05-16 15:03:48 -07:00
parent 897fa30ec1
commit 03bb3a7466
16 changed files with 1182 additions and 8 deletions
@@ -0,0 +1,44 @@
+import { notFound } from 'next/navigation'
+import { requireFormsManagerPage } from '@/lib/forms-guard'
+import { PageHeader, PageTitle } from '@/components/ui/page-title'
+import { FormBuilder } from '@/components/forms/form-builder'
+import { parseFormSchema } from '@/lib/forms-schema'
+
+export const dynamic = 'force-dynamic'
+
+export default async function EditFormPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const { supabase, member } = await requireFormsManagerPage()
+
+  const { data: form } = await supabase
+    .from('forms')
+    .select('id, slug, title, description, kind, visibility, status, legal_text, schema, space_id')
+    .eq('id', id)
+    .eq('space_id', member.space_id)
+    .single()
+
+  if (!form) notFound()
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle>Edit form</PageTitle>
+      </PageHeader>
+      <div className="p-4 md:p-6">
+        <FormBuilder
+          initial={{
+            id: form.id,
+            slug: form.slug,
+            title: form.title,
+            description: form.description ?? '',
+            kind: form.kind as 'form' | 'waiver',
+            visibility: form.visibility as 'public_anon' | 'public_auth' | 'members',
+            legal_text: form.legal_text ?? '',
+            status: form.status as 'draft' | 'published' | 'closed',
+            schema: parseFormSchema(form.schema),
+          }}
+        />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,36 @@
+import { notFound } from 'next/navigation'
+import { requireFormsManagerPage } from '@/lib/forms-guard'
+import { parseFormSchema } from '@/lib/forms-schema'
+import { ResultsClient } from './results-client'
+
+export const dynamic = 'force-dynamic'
+
+export default async function FormResultsPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = await params
+  const { supabase, member } = await requireFormsManagerPage()
+
+  const { data: form } = await supabase
+    .from('forms')
+    .select('id, slug, title, kind, schema')
+    .eq('id', id)
+    .eq('space_id', member.space_id)
+    .single()
+  if (!form) notFound()
+
+  const { data: submissions } = await supabase
+    .from('form_submissions')
+    .select('id, member_id, submitter_email, answers, form_version, created_at')
+    .eq('form_id', id)
+    .eq('space_id', member.space_id)
+    .order('created_at', { ascending: false })
+    .limit(5000)
+
+  return (
+    <ResultsClient
+      formId={form.id}
+      title={form.title}
+      fields={parseFormSchema(form.schema)}
+      submissions={submissions ?? []}
+    />
+  )
+}
@@ -0,0 +1,122 @@
+'use client'
+
+import { useState } from 'react'
+import Link from 'next/link'
+import { ArrowLeft, Download } from 'lucide-react'
+import { PageHeader, PageTitle } from '@/components/ui/page-title'
+import { Button } from '@/components/ui/button'
+import { Empty, EmptyHeader, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
+import { toast } from 'sonner'
+import { exportFormResultsCsv } from '@/lib/actions'
+import type { FormField } from '@/lib/forms-schema'
+
+type Submission = {
+  id: string
+  member_id: string | null
+  submitter_email: string | null
+  answers: Record<string, unknown> | null
+  form_version: number
+  created_at: string
+}
+
+function cell(v: unknown): string {
+  if (v === null || v === undefined) return ''
+  return typeof v === 'string' ? v : JSON.stringify(v)
+}
+
+export function ResultsClient({
+  formId,
+  title,
+  fields,
+  submissions,
+}: {
+  formId: string
+  title: string
+  fields: FormField[]
+  submissions: Submission[]
+}) {
+  const [exporting, setExporting] = useState(false)
+
+  async function exportCsv() {
+    setExporting(true)
+    const res = await exportFormResultsCsv({ formId })
+    setExporting(false)
+    if ('error' in res && res.error) {
+      toast.error(res.error || 'Export failed')
+      return
+    }
+    const { filename, csv } = res.data
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    a.download = filename
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
+  return (
+    <>
+      <PageHeader>
+        <div className="flex items-center gap-2">
+          <Button asChild size="icon" variant="ghost" aria-label="Back to forms">
+            <Link href="/forms">
+              <ArrowLeft className="size-4" />
+            </Link>
+          </Button>
+          <PageTitle>{title} — responses</PageTitle>
+        </div>
+        <Button size="sm" onClick={exportCsv} disabled={exporting || submissions.length === 0}>
+          <Download className="size-4" /> {exporting ? 'Exporting…' : 'Export CSV'}
+        </Button>
+      </PageHeader>
+
+      <div className="p-4 md:p-6">
+        {submissions.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyTitle>No responses yet</EmptyTitle>
+              <EmptyDescription>Submissions will appear here as they come in.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
+        ) : (
+          <div className="overflow-x-auto rounded-lg border">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50 text-left">
+                <tr>
+                  <th className="p-2 font-medium">Submitted</th>
+                  <th className="p-2 font-medium">Submitter</th>
+                  {fields.map(f => (
+                    <th key={f.key} className="p-2 font-medium">
+                      {f.label}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y">
+                {submissions.map(s => {
+                  const a = s.answers ?? {}
+                  return (
+                    <tr key={s.id}>
+                      <td className="whitespace-nowrap p-2 text-muted-foreground">
+                        {new Date(s.created_at).toLocaleString()}
+                      </td>
+                      <td className="p-2 text-muted-foreground">
+                        {s.member_id ? 'Member' : s.submitter_email || 'Anonymous'}
+                      </td>
+                      {fields.map(f => (
+                        <td key={f.key} className="p-2">
+                          {cell(a[f.key])}
+                        </td>
+                      ))}
+                    </tr>
+                  )
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,89 @@
+'use client'
+
+import Link from 'next/link'
+import { FileText, Plus } from 'lucide-react'
+import { PageHeader, PageTitle } from '@/components/ui/page-title'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
+
+type FormRow = {
+  id: string
+  slug: string
+  title: string
+  kind: string
+  visibility: string
+  status: string
+  version: number
+  created_at: string
+}
+
+const VIS_LABEL: Record<string, string> = {
+  members: 'Members only',
+  public_auth: 'Signed in',
+  public_anon: 'Public',
+}
+
+export function FormsClient({ forms }: { forms: FormRow[] }) {
+  return (
+    <>
+      <PageHeader>
+        <PageTitle>Forms &amp; waivers</PageTitle>
+        <Button asChild size="sm">
+          <Link href="/forms/new">
+            <Plus className="size-4" /> New form
+          </Link>
+        </Button>
+      </PageHeader>
+
+      <div className="p-4 md:p-6">
+        {forms.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon">
+                <FileText />
+              </EmptyMedia>
+              <EmptyTitle>No forms yet</EmptyTitle>
+              <EmptyDescription>
+                Build a custom form or a signable waiver. Members-only or public, your choice.
+              </EmptyDescription>
+            </EmptyHeader>
+            <Button asChild>
+              <Link href="/forms/new">
+                <Plus className="size-4" /> Create your first form
+              </Link>
+            </Button>
+          </Empty>
+        ) : (
+          <div className="divide-y rounded-lg border">
+            {forms.map(f => (
+              <div key={f.id} className="flex flex-wrap items-center gap-3 p-3">
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-2">
+                    <Link href={`/forms/${f.id}/edit`} className="font-medium hover:underline">
+                      {f.title}
+                    </Link>
+                    {f.kind === 'waiver' && <Badge variant="secondary">Waiver</Badge>}
+                  </div>
+                  <p className="font-mono text-xs text-muted-foreground">/f/{f.slug}</p>
+                </div>
+                <Badge variant="outline">{VIS_LABEL[f.visibility] ?? f.visibility}</Badge>
+                <Badge variant={f.status === 'published' ? 'default' : 'secondary'}>
+                  {f.status}
+                </Badge>
+                <div className="flex gap-2">
+                  <Button asChild size="sm" variant="ghost">
+                    <Link href={`/forms/${f.id}/results`}>Results</Link>
+                  </Button>
+                  <Button asChild size="sm" variant="secondary">
+                    <Link href={`/forms/${f.id}/edit`}>Edit</Link>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,30 @@
+import { requireFormsManagerPage } from '@/lib/forms-guard'
+import { PageHeader, PageTitle } from '@/components/ui/page-title'
+import { FormBuilder } from '@/components/forms/form-builder'
+
+export const dynamic = 'force-dynamic'
+
+export default async function NewFormPage() {
+  await requireFormsManagerPage()
+
+  return (
+    <>
+      <PageHeader>
+        <PageTitle>New form</PageTitle>
+      </PageHeader>
+      <div className="p-4 md:p-6">
+        <FormBuilder
+          initial={{
+            slug: '',
+            title: '',
+            description: '',
+            kind: 'form',
+            visibility: 'members',
+            legal_text: '',
+            schema: [],
+          }}
+        />
+      </div>
+    </>
+  )
+}
@@ -0,0 +1,16 @@
+import { requireFormsManagerPage } from '@/lib/forms-guard'
+import { FormsClient } from './forms-client'
+
+export const dynamic = 'force-dynamic'
+
+export default async function FormsPage() {
+  const { supabase, member } = await requireFormsManagerPage()
+
+  const { data: forms } = await supabase
+    .from('forms')
+    .select('id, slug, title, kind, visibility, status, version, created_at')
+    .eq('space_id', member.space_id)
+    .order('created_at', { ascending: false })
+
+  return <FormsClient forms={forms ?? []} />
+}