chore: remove unused UI components, dummy data, and theme provider

app/routes/form.tsx

@@ -1,23 +1,92 @@
-import { Link, useParams } from "react-router"
+import { useState, useEffect } from "react"
+import { Link, useParams, useNavigate } from "react-router"
 import {
   ArrowLeft,
   Calendar,
   FileText,
   Lock,
   MessageSquare,
+  Pencil,
+  Trash2,
 } from "lucide-react"
-import { dummyForms } from "@/lib/dummy-data"
 import { Navbar } from "@/components/shared/navbar"
 import { Footer } from "@/components/shared/footer"
 import { FormButton } from "@/components/shared/form-button"
 import { QuestionPreview } from "@/components/forms/question-preview"
+import { getFormById, deleteForm } from "@/lib/api"
+import { useAuth } from "@/app/context/auth-context"
+import type { FormDetail } from "@/lib/types"
 
 export default function FormPreviewPage() {
   const { id } = useParams()
-  const form = dummyForms.find((f) => f.id === id)
+  const navigate = useNavigate()
+  const { user } = useAuth()
+  const [form, setForm] = useState<FormDetail | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+  const [deleting, setDeleting] = useState(false)
 
-  if (!form) {
-    throw new Response("Form not found", { status: 404 })
+  useEffect(() => {
+    if (!id) return
+
+    async function fetchForm() {
+      try {
+        const data = await getFormById(id!)
+        setForm(data)
+      } catch (err) {
+        if (err instanceof Response && err.status === 404) {
+          throw err
+        }
+        setError("Failed to load form. Please try again.")
+      } finally {
+        setLoading(false)
+      }
+    }
+    fetchForm()
+  }, [id])
+
+  async function handleDelete() {
+    if (!id) return
+    setDeleting(true)
+    try {
+      await deleteForm(id)
+      navigate("/forms")
+    } catch {
+      setError("Failed to delete form.")
+      setShowDeleteConfirm(false)
+    } finally {
+      setDeleting(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <p className="text-muted-foreground">Loading...</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 ?? "Form not found"}</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>
+    )
   }
 
   return (
@@ -59,17 +128,38 @@ export default function FormPreviewPage() {
                 </span>
                 <span className="flex items-center gap-1.5">
                   <MessageSquare className="h-3.5 w-3.5" />
-                  {form.responseCount} responses
+                  {form.response_count} responses
                 </span>
                 <span className="flex items-center gap-1.5">
                   <Calendar className="h-3.5 w-3.5" />
-                  Created {form.createdAt}
+                  Created {new Date(form.created_at).toLocaleDateString()}
                 </span>
                 <span className="flex items-center gap-1.5">
                   <Calendar className="h-3.5 w-3.5" />
-                  Updated {form.updatedAt}
+                  Updated {new Date(form.updated_at).toLocaleDateString()}
                 </span>
               </div>
+
+              {user && user.id === form.user_id && (
+                <div className="mt-5 flex items-center gap-3 border-t border-border pt-5">
+                  <Link to={`/form/${id}/edit`}>
+                    <FormButton type="button" variant="ghost" size="sm">
+                      <Pencil className="h-4 w-4" />
+                      Edit
+                    </FormButton>
+                  </Link>
+                  <FormButton
+                    type="button"
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                    Delete
+                  </FormButton>
+                </div>
+              )}
             </div>
           </div>
 
@@ -103,6 +193,38 @@ export default function FormPreviewPage() {
         </div>
       </main>
 
+      {showDeleteConfirm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+          <div className="mx-4 w-full max-w-sm rounded-xl border border-border bg-card p-6 shadow-lg">
+            <h2 className="text-lg font-semibold text-foreground">Delete Form</h2>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Are you sure you want to delete this form? This action cannot be
+              undone.
+            </p>
+            <div className="mt-6 flex items-center justify-end gap-3">
+              <FormButton
+                type="button"
+                variant="ghost"
+                size="sm"
+                onClick={() => setShowDeleteConfirm(false)}
+                disabled={deleting}
+              >
+                Cancel
+              </FormButton>
+              <FormButton
+                type="button"
+                size="sm"
+                onClick={handleDelete}
+                disabled={deleting}
+                className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              >
+                {deleting ? "Deleting..." : "Delete"}
+              </FormButton>
+            </div>
+          </div>
+        </div>
+      )}
+
       <Footer />
     </div>
   )