feat: integrate submit form answer with backend

app/routes.ts

@@ -7,6 +7,7 @@ export default [
     route("forms", "routes/forms.tsx"),
     route("forms/new", "routes/create-form.tsx"),
     route("form/:id", "routes/form.tsx"),
+    route("form/:id/submit", "routes/submit-form.tsx"),
     route("form/:id/edit", "routes/edit-form.tsx"),
     route("*", "routes/not-found.tsx"),
 ] satisfies RouteConfig;

app/routes/form.tsx

@@ -175,11 +175,13 @@ export default function FormPreviewPage() {
 
           <div className="mt-8 flex flex-col items-center gap-3 rounded-xl border border-dashed border-border bg-card/50 p-6">
             <p className="text-sm text-muted-foreground">
-              This is a read-only preview. Form submission is disabled.
+              This is a read-only preview. Click below to fill out this form.
             </p>
-            <FormButton disabled size="lg">
-              Submit (Preview Mode)
-            </FormButton>
+            <Link to={`/form/${id}/submit`}>
+              <FormButton size="lg">
+                Fill Out Form
+              </FormButton>
+            </Link>
           </div>
 
           <div className="mt-6 flex justify-center">

app/routes/submit-form.tsx

@@ -0,0 +1,440 @@
+import { useState, useEffect } from "react"
+import { useParams, Link } from "react-router"
+import {
+  ArrowLeft,
+  CheckCircle2,
+  FileText,
+  Star,
+  ChevronDown,
+  Calendar,
+  Send,
+} from "lucide-react"
+import { Navbar } from "@/components/shared/navbar"
+import { Footer } from "@/components/shared/footer"
+import { FormButton } from "@/components/shared/form-button"
+import { getFormById, submitFormResponse } from "@/lib/api"
+import type { FormDetail, Question } from "@/lib/types"
+
+export default function SubmitFormPage() {
+  const { id } = useParams()
+  const [form, setForm] = useState<FormDetail | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [answers, setAnswers] = useState<Record<string, string>>({})
+  const [submitting, setSubmitting] = useState(false)
+  const [submitted, setSubmitted] = useState(false)
+  const [validationErrors, setValidationErrors] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    if (!id) return
+
+    async function fetchForm() {
+      try {
+        const data = await getFormById(id!)
+        setForm(data)
+        // Initialize empty answers
+        const initial: Record<string, string> = {}
+        data.questions.forEach((q) => {
+          initial[q.id] = ""
+        })
+        setAnswers(initial)
+      } catch (err) {
+        if (err instanceof Response && err.status === 404) {
+          setError("Form not found")
+        } else {
+          setError("Failed to load form. Please try again.")
+        }
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchForm()
+  }, [id])
+
+  function updateAnswer(questionId: string, value: string) {
+    setAnswers((prev) => ({ ...prev, [questionId]: value }))
+    // Clear validation error on change
+    if (validationErrors[questionId]) {
+      setValidationErrors((prev) => {
+        const next = { ...prev }
+        delete next[questionId]
+        return next
+      })
+    }
+  }
+
+  function validate(): boolean {
+    if (!form) return false
+    const errors: Record<string, string> = {}
+
+    form.questions.forEach((q) => {
+      if (q.required && !answers[q.id]?.trim()) {
+        errors[q.id] = "This question is required"
+      }
+    })
+
+    setValidationErrors(errors)
+    return Object.keys(errors).length === 0
+  }
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!id || !form) return
+
+    if (!validate()) {
+      // Scroll to first error
+      const firstErrorId = form.questions.find((q) => validationErrors[q.id] || (q.required && !answers[q.id]?.trim()))?.id
+      if (firstErrorId) {
+        document.getElementById(`question-${firstErrorId}`)?.scrollIntoView({ behavior: "smooth", block: "center" })
+      }
+      return
+    }
+
+    setSubmitting(true)
+    setError(null)
+    try {
+      await submitFormResponse(id, {
+        answers: form.questions
+          .filter((q) => answers[q.id]?.trim())
+          .map((q) => ({
+            question_id: q.id,
+            answer: answers[q.id].trim(),
+          })),
+      })
+      setSubmitted(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to submit response")
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <p className="text-muted-foreground">Loading form...</p>
+      </div>
+    )
+  }
+
+  if (error && !form) {
+    return (
+      <div className="flex min-h-screen flex-col bg-background">
+        <Navbar />
+        <main className="flex flex-1 items-center justify-center">
+          <div className="text-center">
+            <p className="text-sm text-destructive">{error}</p>
+            <Link
+              to="/forms"
+              className="mt-4 inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline"
+            >
+              <ArrowLeft className="h-4 w-4" />
+              Back to forms
+            </Link>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (submitted) {
+    return (
+      <div className="flex min-h-screen flex-col bg-background">
+        <Navbar />
+        <main className="flex flex-1 items-center justify-center">
+          <div className="mx-4 flex max-w-md flex-col items-center rounded-xl border border-border bg-card p-8 text-center shadow-sm">
+            <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+              <CheckCircle2 className="h-8 w-8 text-green-600 dark:text-green-400" />
+            </div>
+            <h2 className="text-xl font-bold text-foreground">
+              Response Submitted!
+            </h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Thank you for filling out <span className="font-medium text-foreground">{form?.title}</span>.
+              Your response has been recorded.
+            </p>
+            <div className="mt-6 flex flex-col gap-2 sm:flex-row">
+              <Link to={`/form/${id}/submit`}>
+                <FormButton
+                  variant="outline"
+                  size="sm"
+                  onClick={() => {
+                    setSubmitted(false)
+                    // Reset answers
+                    if (form) {
+                      const initial: Record<string, string> = {}
+                      form.questions.forEach((q) => { initial[q.id] = "" })
+                      setAnswers(initial)
+                    }
+                  }}
+                >
+                  Submit another response
+                </FormButton>
+              </Link>
+              <Link to="/forms">
+                <FormButton variant="ghost" size="sm">
+                  <ArrowLeft className="h-4 w-4" />
+                  Back to forms
+                </FormButton>
+              </Link>
+            </div>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    )
+  }
+
+  if (!form) return null
+
+  return (
+    <div className="flex min-h-screen flex-col bg-background">
+      <Navbar />
+
+      <main className="flex-1">
+        <div className="mx-auto max-w-3xl px-4 py-8 lg:px-8">
+          <Link
+            to={`/form/${id}`}
+            className="mb-6 inline-flex items-center gap-1.5 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
+          >
+            <ArrowLeft className="h-4 w-4" />
+            Back to form preview
+          </Link>
+
+          <div className="mb-8 rounded-xl border border-border bg-card shadow-sm">
+            <div className="h-2 rounded-t-xl bg-primary" />
+            <div className="p-6">
+              <h1 className="text-xl font-bold text-foreground text-balance sm:text-2xl">
+                {form.title}
+              </h1>
+              <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
+                {form.description}
+              </p>
+              <div className="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
+                <FileText className="h-3.5 w-3.5" />
+                <span>{form.questions.length} questions</span>
+                <span className="text-destructive">* Required</span>
+              </div>
+            </div>
+          </div>
+
+          {error && (
+            <div className="mb-4 rounded-lg border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive">
+              {error}
+            </div>
+          )}
+
+          <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+            {form.questions.map((question, index) => (
+              <QuestionField
+                key={question.id}
+                question={question}
+                index={index}
+                value={answers[question.id] ?? ""}
+                onChange={(val) => updateAnswer(question.id, val)}
+                error={validationErrors[question.id]}
+              />
+            ))}
+
+            <div className="mt-4 flex items-center justify-between">
+              <FormButton type="submit" size="lg" disabled={submitting}>
+                {submitting ? (
+                  "Submitting..."
+                ) : (
+                  <>
+                    <Send className="h-4 w-4" />
+                    Submit
+                  </>
+                )}
+              </FormButton>
+              <button
+                type="button"
+                onClick={() => {
+                  const initial: Record<string, string> = {}
+                  form.questions.forEach((q) => { initial[q.id] = "" })
+                  setAnswers(initial)
+                  setValidationErrors({})
+                }}
+                className="text-sm text-muted-foreground hover:text-foreground hover:underline"
+              >
+                Clear form
+              </button>
+            </div>
+          </form>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  )
+}
+
+// ─── Question field component ────────────────────────────────────────────────
+
+interface QuestionFieldProps {
+  question: Question
+  index: number
+  value: string
+  onChange: (value: string) => void
+  error?: string
+}
+
+function QuestionField({ question, index, value, onChange, error }: QuestionFieldProps) {
+  return (
+    <div
+      id={`question-${question.id}`}
+      className={`rounded-xl border bg-card p-5 shadow-sm transition-colors ${
+        error ? "border-destructive" : "border-border"
+      }`}
+    >
+      <div className="mb-4 flex items-start gap-3">
+        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-xs font-semibold text-primary">
+          {index + 1}
+        </span>
+        <div className="flex-1">
+          <h3 className="text-sm font-semibold leading-snug text-foreground">
+            {question.title}
+            {question.required && (
+              <span className="ml-1 text-destructive">*</span>
+            )}
+          </h3>
+          <p className="mt-1 text-xs capitalize text-muted-foreground">
+            {question.type.replace("_", " ")}
+          </p>
+        </div>
+      </div>
+
+      <div className="pl-10">
+        {question.type === "short_text" && (
+          <input
+            type="text"
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Your answer"
+            className="w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20"
+          />
+        )}
+
+        {question.type === "long_text" && (
+          <textarea
+            value={value}
+            onChange={(e) => onChange(e.target.value)}
+            placeholder="Your answer"
+            rows={4}
+            className="w-full resize-y rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20"
+          />
+        )}
+
+        {question.type === "multiple_choice" && question.options.length > 0 && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => (
+              <label
+                key={option.id}
+                className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground"
+              >
+                <input
+                  type="radio"
+                  name={`question-${question.id}`}
+                  value={option.label}
+                  checked={value === option.label}
+                  onChange={() => onChange(option.label)}
+                  className="h-4 w-4 accent-primary"
+                />
+                {option.label}
+              </label>
+            ))}
+          </div>
+        )}
+
+        {question.type === "checkbox" && question.options.length > 0 && (
+          <div className="flex flex-col gap-2.5">
+            {question.options.map((option) => {
+              const selected = value ? value.split(", ") : []
+              const isChecked = selected.includes(option.label)
+              return (
+                <label
+                  key={option.id}
+                  className="flex cursor-pointer items-center gap-2.5 text-sm text-foreground"
+                >
+                  <input
+                    type="checkbox"
+                    checked={isChecked}
+                    onChange={() => {
+                      const next = isChecked
+                        ? selected.filter((s) => s !== option.label)
+                        : [...selected, option.label]
+                      onChange(next.join(", "))
+                    }}
+                    className="h-4 w-4 accent-primary"
+                  />
+                  {option.label}
+                </label>
+              )
+            })}
+          </div>
+        )}
+
+        {question.type === "dropdown" && (
+          <div className="relative">
+            <select
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+              className="h-10 w-full appearance-none rounded-lg border border-input bg-background px-3.5 pr-10 text-sm text-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20"
+            >
+              <option value="">Select an option</option>
+              {question.options.map((option) => (
+                <option key={option.id} value={option.label}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+            <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          </div>
+        )}
+
+        {question.type === "date" && (
+          <div className="relative">
+            <input
+              type="date"
+              value={value}
+              onChange={(e) => onChange(e.target.value)}
+              className="w-full rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm text-foreground outline-none transition-colors focus:border-primary focus:ring-2 focus:ring-primary/20"
+            />
+          </div>
+        )}
+
+        {question.type === "rating" && (
+          <div className="flex gap-1.5">
+            {[1, 2, 3, 4, 5].map((star) => (
+              <button
+                key={star}
+                type="button"
+                onClick={() => onChange(String(star))}
+                className="transition-colors hover:scale-110"
+              >
+                <Star
+                  className={`h-7 w-7 ${
+                    star <= Number(value)
+                      ? "fill-yellow-400 text-yellow-400"
+                      : "text-input hover:text-yellow-300"
+                  }`}
+                  strokeWidth={1.5}
+                />
+              </button>
+            ))}
+            {value && (
+              <span className="ml-2 self-center text-sm text-muted-foreground">
+                {value}/5
+              </span>
+            )}
+          </div>
+        )}
+
+        {error && (
+          <p className="mt-2 text-xs text-destructive">{error}</p>
+        )}
+      </div>
+    </div>
+  )
+}

lib/api.ts

@@ -6,7 +6,7 @@ import {
   isTokenExpired,
   decodeJWT,
 } from "@/lib/auth"
-import type { FormSummary, FormDetail, CreateFormPayload, UpdateFormPayload } from "@/lib/types"
+import type { FormSummary, FormDetail, CreateFormPayload, UpdateFormPayload, SubmitFormPayload } from "@/lib/types"
 
 export async function refreshAccessToken(): Promise<string | null> {
   if (typeof window === "undefined") return null
@@ -210,6 +210,19 @@ export async function updateForm(id: string, payload: UpdateFormPayload): Promis
   return res.json()
 }
 
+export async function submitFormResponse(id: string, payload: SubmitFormPayload): Promise<void> {
+  const res = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/form/${id}/response`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  })
+
+  if (!res.ok) {
+    const data = await res.json().catch(() => null)
+    throw new Error(data?.message ?? "Failed to submit form response")
+  }
+}
+
 export async function deleteForm(id: string): Promise<void> {
   const res = await fetchWithAuth(`${import.meta.env.VITE_API_BASE_URL}/api/form/${id}`, {
     method: "DELETE",

lib/types.ts

@@ -66,3 +66,12 @@ export interface UpdateFormPayload {
   description: string
   questions: CreateQuestion[]
 }
+
+export interface SubmitFormAnswer {
+  question_id: string
+  answer: string
+}
+
+export interface SubmitFormPayload {
+  answers: SubmitFormAnswer[]
+}