From 18fa039a8653035b7bb5851581cdec15175883fd Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 15:37:54 -0800
Subject: [PATCH 01/13] Built the form question editor component and a test
 page to try it out (looks pretty clean). Supports multiple question types
 with dynamic UI and uses Zod schemas.

---
 .../src/app/admin/forms/test-editor/page.tsx  |  68 ++++
 .../admin/forms/question-edit-card.tsx        | 326 ++++++++++++++++++
 apps/blade/src/lib/types/form.ts              |  44 +++
 3 files changed, 438 insertions(+)
 create mode 100644 apps/blade/src/app/admin/forms/test-editor/page.tsx
 create mode 100644 apps/blade/src/components/admin/forms/question-edit-card.tsx
 create mode 100644 apps/blade/src/lib/types/form.ts

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
new file mode 100644
index 000000000..90563c7fc
--- /dev/null
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { useState } from "react";
+// Replaced uuid import with native crypto.randomUUID for simplicity and to avoid adding dependencies
+// import { v4 as uuidv4 } from "uuid";
+const uuidv4 = () => crypto.randomUUID();
+
+import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
+import type { FormQuestion } from "~/lib/types/form";
+
+export default function TestEditorPage() {
+    const [question, setQuestion] = useState<FormQuestion>({
+        id: uuidv4(),
+        title: "Untitled Question",
+        type: "multiple_choice",
+        required: false,
+        options: [
+            { id: uuidv4(), value: "Option 1", isOther: false },
+        ],
+    });
+
+    const handleUpdate = (updatedQuestion: FormQuestion) => {
+        console.log("Updated Question:", updatedQuestion);
+        setQuestion(updatedQuestion);
+    };
+
+    const handleDelete = (id: string) => {
+        console.log("Delete Question:", id);
+        alert("Delete clicked for id: " + id);
+    };
+
+    const handleDuplicate = (q: FormQuestion) => {
+        console.log("Duplicate Question:", q);
+        alert("Duplicate clicked");
+    };
+
+    return (
+        <div className="min-h-screen bg-muted/30 p-8 flex justify-center items-start">
+            <div className="w-full max-w-3xl space-y-6">
+                <div className="border-t-8 border-primary rounded-t-lg bg-card p-6 shadow-sm">
+                    <h1 className="text-3xl font-bold tracking-tight">Ripoff Google Form by KH test</h1>
+                    <p className="text-muted-foreground mt-2">
+                        Welcome to the awesome bootleg google form by KH mindblown emoji*
+                    </p>
+                </div>
+
+                <div className="bg-transparent">
+                    <QuestionEditCard
+                        question={question}
+                        isActive={true}
+                        onUpdate={handleUpdate}
+                        onDelete={handleDelete}
+                        onDuplicate={handleDuplicate}
+                    />
+                </div>
+
+            </div>
+
+            {/* <div className="p-4 bg-card rounded-md border shadow-sm">
+                <h2 className="text-lg font-semibold mb-2">Current State (Debug)</h2>
+                <pre className="text-xs overflow-auto max-h-96 text-muted-foreground font-mono bg-muted p-4 rounded">
+                    {JSON.stringify(question, null, 2)}
+                </pre>
+            </div> */}
+        </div>
+
+    );
+}
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
new file mode 100644
index 000000000..bef6b0150
--- /dev/null
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -0,0 +1,326 @@
+"use client";
+
+import * as React from "react";
+import {
+    AlignLeft,
+    Calendar,
+    CheckSquare,
+    ChevronDown,
+    Circle,
+    CircleDot,
+    Clock,
+    Copy,
+    MoreVertical,
+    Pilcrow,
+    Trash,
+    X,
+    GripHorizontal,
+} from "lucide-react";
+const uuidv4 = () => crypto.randomUUID();
+
+import { cn } from "@forge/ui";
+import { Button } from "@forge/ui/button";
+import { Card } from "@forge/ui/card";
+import { Input } from "@forge/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@forge/ui/select";
+import { Checkbox } from "@forge/ui/checkbox";
+import { Textarea } from "@forge/ui/textarea";
+
+import {
+    FormQuestion,
+    QuestionOption,
+    QuestionType,
+} from "~/lib/types/form";
+
+interface QuestionEditCardProps {
+    question: FormQuestion;
+    isActive: boolean;
+    onUpdate: (updatedQuestion: FormQuestion) => void;
+    onDelete: (id: string) => void;
+    onDuplicate: (question: FormQuestion) => void;
+}
+
+const QUESTION_TYPES: {
+    value: QuestionType;
+    label: string;
+    icon: React.ElementType;
+}[] = [
+        { value: "short_answer", label: "Short answer", icon: AlignLeft },
+        { value: "paragraph", label: "Paragraph", icon: Pilcrow },
+        { value: "multiple_choice", label: "Multiple choice", icon: CircleDot },
+        { value: "checkboxes", label: "Checkboxes", icon: CheckSquare },
+        { value: "dropdown", label: "Dropdown", icon: ChevronDown },
+        { value: "date", label: "Date", icon: Calendar },
+        { value: "time", label: "Time", icon: Clock },
+    ];
+
+export function QuestionEditCard({
+    question,
+    isActive,
+    onUpdate,
+    onDelete,
+    onDuplicate,
+}: QuestionEditCardProps) {
+    // -- Handlers --
+
+    const handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        onUpdate({ ...question, title: e.target.value });
+    };
+
+    const handleTypeChange = (newType: QuestionType) => {
+        let updatedQuestion = { ...question, type: newType };
+
+        if (
+            ["multiple_choice", "checkboxes", "dropdown"].includes(newType) &&
+            (!question.options || question.options.length === 0)
+        ) {
+            updatedQuestion.options = [{ id: uuidv4(), value: "Option 1", isOther: false }];
+        }
+
+        if (["short_answer", "paragraph", "date", "time"].includes(newType)) {
+            updatedQuestion.options = undefined;
+        }
+
+        onUpdate(updatedQuestion);
+    };
+
+    const handleRequiredChange = (checked: boolean) => {
+        onUpdate({ ...question, required: checked });
+    };
+
+    return (
+        <Card
+            className={cn(
+                "relative flex flex-col gap-4 border-l-4 p-6 transition-all bg-card text-card-foreground",
+                isActive ? "border-l-primary shadow-md ring-1 ring-black/5" : "border-l-transparent hover:bg-muted/50"
+            )}
+            onClick={(e) => {
+                e.stopPropagation();
+            }}
+        >
+
+
+            {/* Header */}
+            <div className="flex flex-col gap-4 md:flex-row md:items-start">
+                <div className="flex-1 bg-muted/50 p-2 rounded-md focus-within:bg-muted focus-within:ring-1 focus-within:ring-primary/20 transition-colors">
+                    <Textarea
+                        value={question.title}
+                        onChange={handleTitleChange}
+                        placeholder="Question"
+                        className="min-h-[3rem] resize-none overflow-hidden border-none bg-transparent text-lg font-medium placeholder:text-muted-foreground focus-visible:ring-0 px-0 py-0"
+                        rows={1}
+                        onInput={(e) => {
+                            // Auto-resize
+                            const target = e.target as HTMLTextAreaElement;
+                            target.style.height = "auto";
+                            target.style.height = `${target.scrollHeight}px`;
+                        }}
+                    />
+                </div>
+
+                <div className="w-full md:w-[220px]">
+                    <Select value={question.type} onValueChange={(val: QuestionType) => handleTypeChange(val)}>
+                        <SelectTrigger className="h-12 w-full">
+                            <SelectValue placeholder="Select type" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {QUESTION_TYPES.map((type) => (
+                                <SelectItem key={type.value} value={type.value}>
+                                    <div className="flex items-center gap-3">
+                                        <type.icon className="h-4 w-4" />
+                                        <span>{type.label}</span>
+                                    </div>
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                </div>
+            </div>
+
+            {/* Body */}
+            <div className="pt-2">
+                <QuestionBody question={question} onUpdate={onUpdate} />
+            </div>
+
+            {/* Footer */}
+            <div className="mt-4 flex items-center justify-between gap-2 border-t pt-4">
+                <div className="cursor-move text-gray-300 hover:text-gray-500">
+                    <GripHorizontal className="h-5 w-5 rotate-90" />
+                </div>
+                <div className="flex items-center justify-end gap-2">
+                    <div className="mr-4 flex items-center gap-2 border-r pr-4">
+                        <Copy
+                            className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+                            onClick={() => onDuplicate(question)}
+                        />
+                        <Trash
+                            className="h-5 w-5 cursor-pointer text-gray-500 hover:text-red-600"
+                            onClick={() => onDelete(question.id)}
+                        />
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <span className="text-sm text-muted-foreground">Required</span>
+                        <Checkbox checked={question.required} onCheckedChange={handleRequiredChange} />
+                    </div>
+
+                    <div className="ml-2">
+                        <Button variant="ghost" size="icon">
+                            <MoreVertical className="h-5 w-5 text-gray-500" />
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </Card>
+    );
+}
+
+// -- Sub-Components --
+
+function QuestionBody({
+    question,
+    onUpdate,
+}: {
+    question: FormQuestion;
+    onUpdate: (q: FormQuestion) => void;
+}) {
+    switch (question.type) {
+        case "short_answer":
+            return (
+                <div className="w-1/2 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
+                    Short answer text
+                </div>
+            );
+        case "paragraph":
+            return (
+                <div className="w-3/4 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
+                    Long answer text
+                </div>
+            );
+        case "multiple_choice":
+        case "checkboxes":
+        case "dropdown":
+            return <OptionList question={question} onUpdate={onUpdate} />;
+        case "date":
+            return (
+                <div className="flex items-center gap-2 text-gray-400">
+                    <Calendar className="h-5 w-5" />
+                    <span>Month, day, year</span>
+                </div>
+            );
+        case "time":
+            return (
+                <div className="flex items-center gap-2 text-gray-400">
+                    <Clock className="h-5 w-5" />
+                    <span>Time</span>
+                </div>
+            );
+        default:
+            return null;
+    }
+}
+
+function OptionList({
+    question,
+    onUpdate,
+}: {
+    question: FormQuestion;
+    onUpdate: (q: FormQuestion) => void;
+}) {
+    const options = question.options || [];
+
+    const handleOptionChange = (id: string, newValue: string) => {
+        const newOptions = options.map((opt) =>
+            opt.id === id ? { ...opt, value: newValue } : opt
+        );
+        onUpdate({ ...question, options: newOptions });
+    };
+
+    const addOption = () => {
+        const newOption: QuestionOption = {
+            id: uuidv4(),
+            value: `Option ${options.length + 1}`,
+            isOther: false,
+        };
+        onUpdate({ ...question, options: [...options, newOption] });
+    };
+
+    const removeOption = (id: string) => {
+        const newOptions = options.filter((opt) => opt.id !== id);
+        onUpdate({ ...question, options: newOptions });
+    };
+
+    const Icon =
+        question.type === "multiple_choice"
+            ? Circle
+            : question.type === "checkboxes"
+                ? CheckSquare
+                : Circle;
+
+    return (
+        <div className="flex flex-col gap-2">
+            {options.map((option, idx) => (
+                <div key={option.id} className="group flex items-center gap-2">
+                    {question.type === "dropdown" ? (
+                        <span className="w-6 text-center text-sm">{idx + 1}.</span>
+                    ) : (
+                        <Icon className="h-5 w-5 text-gray-300" />
+                    )}
+
+                    <Input
+                        value={option.value}
+                        onChange={(e) => handleOptionChange(option.id, e.target.value)}
+                        className="flex-1 border-none hover:border-b hover:border-gray-200 focus:border-b-2 focus:border-blue-500 focus:ring-0 rounded-none px-0"
+                        placeholder={`Option ${idx + 1}`}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                addOption();
+                            }
+                            if (e.key === "Backspace" && option.value === "") {
+                                e.preventDefault();
+                                removeOption(option.id);
+                            }
+                        }}
+                        autoFocus={idx === options.length - 1 && options.length > 1}
+                    />
+
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        className="opacity-0 group-hover:opacity-100 transition-opacity"
+                        onClick={() => removeOption(option.id)}
+                        tabIndex={-1}
+                    >
+                        <X className="h-5 w-5 text-gray-500" />
+                    </Button>
+                </div>
+            ))}
+
+            {/* Add Option Button */}
+            <div className="flex items-center gap-2 mt-1">
+                {question.type === "dropdown" ? (
+                    <span className="w-6 text-center text-sm">{options.length + 1}.</span>
+                ) : (
+                    <Icon className="h-5 w-5 text-transparent" />
+                )}
+
+                <div className="flex items-center gap-1 text-sm text-gray-500">
+                    <Button
+                        variant="ghost"
+                        className="h-auto px-0 py-1 text-gray-500 hover:text-gray-800 hover:bg-transparent"
+                        onClick={addOption}
+                    >
+                        Add option
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/blade/src/lib/types/form.ts b/apps/blade/src/lib/types/form.ts
new file mode 100644
index 000000000..331728e42
--- /dev/null
+++ b/apps/blade/src/lib/types/form.ts
@@ -0,0 +1,44 @@
+import { z } from "zod";
+
+export const QuestionTypeEnum = z.enum([
+  "short_answer",
+  "paragraph",
+  "multiple_choice",
+  "checkboxes",
+  "dropdown",
+  "date",
+  "time",
+]);
+
+export type QuestionType = z.infer<typeof QuestionTypeEnum>;
+
+// Option Schema for Choice Questions
+export const QuestionOptionSchema = z.object({
+  id: z.string().uuid(),
+  value: z.string(),
+  isOther: z.boolean().default(false), // Logic for "Other" option
+});
+
+export const FormQuestionSchema = z.object({
+  id: z.string().uuid(),
+  title: z.string().min(1, "Question title is required"),
+  description: z.string().optional(),
+  type: QuestionTypeEnum,
+  required: z.boolean().default(false),
+
+  // Data specific to types
+  options: z.array(QuestionOptionSchema).optional(),
+  placeholder: z.string().optional(), // For text inputs
+
+  // Validation constraints (optional for V1 but good to have)
+  validation: z
+    .object({
+      min: z.number().optional(),
+      max: z.number().optional(),
+      regex: z.string().optional(),
+    })
+    .optional(),
+});
+
+export type FormQuestion = z.infer<typeof FormQuestionSchema>;
+export type QuestionOption = z.infer<typeof QuestionOptionSchema>;

From 8847a031748984cd8202ee896361986ef337f868 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 16:11:01 -0800
Subject: [PATCH 02/13] Fixed Prettier formatting issues and changed let to
 const for CI checks

---
 .../src/app/admin/forms/test-editor/page.tsx  |  95 ++-
 .../admin/forms/question-edit-card.tsx        | 567 +++++++++---------
 2 files changed, 333 insertions(+), 329 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index 90563c7fc..19c279721 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -1,68 +1,67 @@
 "use client";
 
 import { useState } from "react";
+
+import type { FormQuestion } from "~/lib/types/form";
+import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
+
 // Replaced uuid import with native crypto.randomUUID for simplicity and to avoid adding dependencies
 // import { v4 as uuidv4 } from "uuid";
 const uuidv4 = () => crypto.randomUUID();
 
-import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
-import type { FormQuestion } from "~/lib/types/form";
-
 export default function TestEditorPage() {
-    const [question, setQuestion] = useState<FormQuestion>({
-        id: uuidv4(),
-        title: "Untitled Question",
-        type: "multiple_choice",
-        required: false,
-        options: [
-            { id: uuidv4(), value: "Option 1", isOther: false },
-        ],
-    });
-
-    const handleUpdate = (updatedQuestion: FormQuestion) => {
-        console.log("Updated Question:", updatedQuestion);
-        setQuestion(updatedQuestion);
-    };
+  const [question, setQuestion] = useState<FormQuestion>({
+    id: uuidv4(),
+    title: "Untitled Question",
+    type: "multiple_choice",
+    required: false,
+    options: [{ id: uuidv4(), value: "Option 1", isOther: false }],
+  });
 
-    const handleDelete = (id: string) => {
-        console.log("Delete Question:", id);
-        alert("Delete clicked for id: " + id);
-    };
+  const handleUpdate = (updatedQuestion: FormQuestion) => {
+    console.log("Updated Question:", updatedQuestion);
+    setQuestion(updatedQuestion);
+  };
 
-    const handleDuplicate = (q: FormQuestion) => {
-        console.log("Duplicate Question:", q);
-        alert("Duplicate clicked");
-    };
+  const handleDelete = (id: string) => {
+    console.log("Delete Question:", id);
+    alert("Delete clicked for id: " + id);
+  };
 
-    return (
-        <div className="min-h-screen bg-muted/30 p-8 flex justify-center items-start">
-            <div className="w-full max-w-3xl space-y-6">
-                <div className="border-t-8 border-primary rounded-t-lg bg-card p-6 shadow-sm">
-                    <h1 className="text-3xl font-bold tracking-tight">Ripoff Google Form by KH test</h1>
-                    <p className="text-muted-foreground mt-2">
-                        Welcome to the awesome bootleg google form by KH mindblown emoji*
-                    </p>
-                </div>
+  const handleDuplicate = (q: FormQuestion) => {
+    console.log("Duplicate Question:", q);
+    alert("Duplicate clicked");
+  };
 
-                <div className="bg-transparent">
-                    <QuestionEditCard
-                        question={question}
-                        isActive={true}
-                        onUpdate={handleUpdate}
-                        onDelete={handleDelete}
-                        onDuplicate={handleDuplicate}
-                    />
-                </div>
+  return (
+    <div className="flex min-h-screen items-start justify-center bg-muted/30 p-8">
+      <div className="w-full max-w-3xl space-y-6">
+        <div className="rounded-t-lg border-t-8 border-primary bg-card p-6 shadow-sm">
+          <h1 className="text-3xl font-bold tracking-tight">
+            Ripoff Google Form by KH test
+          </h1>
+          <p className="mt-2 text-muted-foreground">
+            Welcome to the awesome bootleg google form by KH mindblown emoji*
+          </p>
+        </div>
 
-            </div>
+        <div className="bg-transparent">
+          <QuestionEditCard
+            question={question}
+            isActive={true}
+            onUpdate={handleUpdate}
+            onDelete={handleDelete}
+            onDuplicate={handleDuplicate}
+          />
+        </div>
+      </div>
 
-            {/* <div className="p-4 bg-card rounded-md border shadow-sm">
+      {/* <div className="p-4 bg-card rounded-md border shadow-sm">
                 <h2 className="text-lg font-semibold mb-2">Current State (Debug)</h2>
                 <pre className="text-xs overflow-auto max-h-96 text-muted-foreground font-mono bg-muted p-4 rounded">
                     {JSON.stringify(question, null, 2)}
                 </pre>
             </div> */}
-        </div>
-
-    );
+    </div>
+  );
 }
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
index bef6b0150..d7e132a27 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -2,325 +2,330 @@
 
 import * as React from "react";
 import {
-    AlignLeft,
-    Calendar,
-    CheckSquare,
-    ChevronDown,
-    Circle,
-    CircleDot,
-    Clock,
-    Copy,
-    MoreVertical,
-    Pilcrow,
-    Trash,
-    X,
-    GripHorizontal,
+  AlignLeft,
+  Calendar,
+  CheckSquare,
+  ChevronDown,
+  Circle,
+  CircleDot,
+  Clock,
+  Copy,
+  GripHorizontal,
+  MoreVertical,
+  Pilcrow,
+  Trash,
+  X,
 } from "lucide-react";
-const uuidv4 = () => crypto.randomUUID();
 
 import { cn } from "@forge/ui";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
+import { Checkbox } from "@forge/ui/checkbox";
 import { Input } from "@forge/ui/input";
 import {
-    Select,
-    SelectContent,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
 } from "@forge/ui/select";
-import { Checkbox } from "@forge/ui/checkbox";
 import { Textarea } from "@forge/ui/textarea";
 
-import {
-    FormQuestion,
-    QuestionOption,
-    QuestionType,
-} from "~/lib/types/form";
+import { FormQuestion, QuestionOption, QuestionType } from "~/lib/types/form";
+
+const uuidv4 = () => crypto.randomUUID();
 
 interface QuestionEditCardProps {
-    question: FormQuestion;
-    isActive: boolean;
-    onUpdate: (updatedQuestion: FormQuestion) => void;
-    onDelete: (id: string) => void;
-    onDuplicate: (question: FormQuestion) => void;
+  question: FormQuestion;
+  isActive: boolean;
+  onUpdate: (updatedQuestion: FormQuestion) => void;
+  onDelete: (id: string) => void;
+  onDuplicate: (question: FormQuestion) => void;
 }
 
 const QUESTION_TYPES: {
-    value: QuestionType;
-    label: string;
-    icon: React.ElementType;
+  value: QuestionType;
+  label: string;
+  icon: React.ElementType;
 }[] = [
-        { value: "short_answer", label: "Short answer", icon: AlignLeft },
-        { value: "paragraph", label: "Paragraph", icon: Pilcrow },
-        { value: "multiple_choice", label: "Multiple choice", icon: CircleDot },
-        { value: "checkboxes", label: "Checkboxes", icon: CheckSquare },
-        { value: "dropdown", label: "Dropdown", icon: ChevronDown },
-        { value: "date", label: "Date", icon: Calendar },
-        { value: "time", label: "Time", icon: Clock },
-    ];
+  { value: "short_answer", label: "Short answer", icon: AlignLeft },
+  { value: "paragraph", label: "Paragraph", icon: Pilcrow },
+  { value: "multiple_choice", label: "Multiple choice", icon: CircleDot },
+  { value: "checkboxes", label: "Checkboxes", icon: CheckSquare },
+  { value: "dropdown", label: "Dropdown", icon: ChevronDown },
+  { value: "date", label: "Date", icon: Calendar },
+  { value: "time", label: "Time", icon: Clock },
+];
 
 export function QuestionEditCard({
-    question,
-    isActive,
-    onUpdate,
-    onDelete,
-    onDuplicate,
+  question,
+  isActive,
+  onUpdate,
+  onDelete,
+  onDuplicate,
 }: QuestionEditCardProps) {
-    // -- Handlers --
-
-    const handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        onUpdate({ ...question, title: e.target.value });
-    };
-
-    const handleTypeChange = (newType: QuestionType) => {
-        let updatedQuestion = { ...question, type: newType };
-
-        if (
-            ["multiple_choice", "checkboxes", "dropdown"].includes(newType) &&
-            (!question.options || question.options.length === 0)
-        ) {
-            updatedQuestion.options = [{ id: uuidv4(), value: "Option 1", isOther: false }];
-        }
-
-        if (["short_answer", "paragraph", "date", "time"].includes(newType)) {
-            updatedQuestion.options = undefined;
-        }
-
-        onUpdate(updatedQuestion);
-    };
+  // -- Handlers --
+
+  const handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onUpdate({ ...question, title: e.target.value });
+  };
+
+  const handleTypeChange = (newType: QuestionType) => {
+    const updatedQuestion = { ...question, type: newType };
+
+    if (
+      ["multiple_choice", "checkboxes", "dropdown"].includes(newType) &&
+      (!question.options || question.options.length === 0)
+    ) {
+      updatedQuestion.options = [
+        { id: uuidv4(), value: "Option 1", isOther: false },
+      ];
+    }
 
-    const handleRequiredChange = (checked: boolean) => {
-        onUpdate({ ...question, required: checked });
-    };
+    if (["short_answer", "paragraph", "date", "time"].includes(newType)) {
+      updatedQuestion.options = undefined;
+    }
 
-    return (
-        <Card
-            className={cn(
-                "relative flex flex-col gap-4 border-l-4 p-6 transition-all bg-card text-card-foreground",
-                isActive ? "border-l-primary shadow-md ring-1 ring-black/5" : "border-l-transparent hover:bg-muted/50"
-            )}
-            onClick={(e) => {
-                e.stopPropagation();
+    onUpdate(updatedQuestion);
+  };
+
+  const handleRequiredChange = (checked: boolean) => {
+    onUpdate({ ...question, required: checked });
+  };
+
+  return (
+    <Card
+      className={cn(
+        "relative flex flex-col gap-4 border-l-4 bg-card p-6 text-card-foreground transition-all",
+        isActive
+          ? "border-l-primary shadow-md ring-1 ring-black/5"
+          : "border-l-transparent hover:bg-muted/50",
+      )}
+      onClick={(e) => {
+        e.stopPropagation();
+      }}
+    >
+      {/* Header */}
+      <div className="flex flex-col gap-4 md:flex-row md:items-start">
+        <div className="flex-1 rounded-md bg-muted/50 p-2 transition-colors focus-within:bg-muted focus-within:ring-1 focus-within:ring-primary/20">
+          <Textarea
+            value={question.title}
+            onChange={handleTitleChange}
+            placeholder="Question"
+            className="min-h-[3rem] resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-lg font-medium placeholder:text-muted-foreground focus-visible:ring-0"
+            rows={1}
+            onInput={(e) => {
+              // Auto-resize
+              const target = e.target as HTMLTextAreaElement;
+              target.style.height = "auto";
+              target.style.height = `${target.scrollHeight}px`;
             }}
-        >
-
-
-            {/* Header */}
-            <div className="flex flex-col gap-4 md:flex-row md:items-start">
-                <div className="flex-1 bg-muted/50 p-2 rounded-md focus-within:bg-muted focus-within:ring-1 focus-within:ring-primary/20 transition-colors">
-                    <Textarea
-                        value={question.title}
-                        onChange={handleTitleChange}
-                        placeholder="Question"
-                        className="min-h-[3rem] resize-none overflow-hidden border-none bg-transparent text-lg font-medium placeholder:text-muted-foreground focus-visible:ring-0 px-0 py-0"
-                        rows={1}
-                        onInput={(e) => {
-                            // Auto-resize
-                            const target = e.target as HTMLTextAreaElement;
-                            target.style.height = "auto";
-                            target.style.height = `${target.scrollHeight}px`;
-                        }}
-                    />
-                </div>
-
-                <div className="w-full md:w-[220px]">
-                    <Select value={question.type} onValueChange={(val: QuestionType) => handleTypeChange(val)}>
-                        <SelectTrigger className="h-12 w-full">
-                            <SelectValue placeholder="Select type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            {QUESTION_TYPES.map((type) => (
-                                <SelectItem key={type.value} value={type.value}>
-                                    <div className="flex items-center gap-3">
-                                        <type.icon className="h-4 w-4" />
-                                        <span>{type.label}</span>
-                                    </div>
-                                </SelectItem>
-                            ))}
-                        </SelectContent>
-                    </Select>
-                </div>
-            </div>
-
-            {/* Body */}
-            <div className="pt-2">
-                <QuestionBody question={question} onUpdate={onUpdate} />
-            </div>
+          />
+        </div>
 
-            {/* Footer */}
-            <div className="mt-4 flex items-center justify-between gap-2 border-t pt-4">
-                <div className="cursor-move text-gray-300 hover:text-gray-500">
-                    <GripHorizontal className="h-5 w-5 rotate-90" />
-                </div>
-                <div className="flex items-center justify-end gap-2">
-                    <div className="mr-4 flex items-center gap-2 border-r pr-4">
-                        <Copy
-                            className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
-                            onClick={() => onDuplicate(question)}
-                        />
-                        <Trash
-                            className="h-5 w-5 cursor-pointer text-gray-500 hover:text-red-600"
-                            onClick={() => onDelete(question.id)}
-                        />
-                    </div>
+        <div className="w-full md:w-[220px]">
+          <Select
+            value={question.type}
+            onValueChange={(val: QuestionType) => handleTypeChange(val)}
+          >
+            <SelectTrigger className="h-12 w-full">
+              <SelectValue placeholder="Select type" />
+            </SelectTrigger>
+            <SelectContent>
+              {QUESTION_TYPES.map((type) => (
+                <SelectItem key={type.value} value={type.value}>
+                  <div className="flex items-center gap-3">
+                    <type.icon className="h-4 w-4" />
+                    <span>{type.label}</span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
 
-                    <div className="flex items-center gap-2">
-                        <span className="text-sm text-muted-foreground">Required</span>
-                        <Checkbox checked={question.required} onCheckedChange={handleRequiredChange} />
-                    </div>
+      {/* Body */}
+      <div className="pt-2">
+        <QuestionBody question={question} onUpdate={onUpdate} />
+      </div>
 
-                    <div className="ml-2">
-                        <Button variant="ghost" size="icon">
-                            <MoreVertical className="h-5 w-5 text-gray-500" />
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </Card>
-    );
+      {/* Footer */}
+      <div className="mt-4 flex items-center justify-between gap-2 border-t pt-4">
+        <div className="cursor-move text-gray-300 hover:text-gray-500">
+          <GripHorizontal className="h-5 w-5 rotate-90" />
+        </div>
+        <div className="flex items-center justify-end gap-2">
+          <div className="mr-4 flex items-center gap-2 border-r pr-4">
+            <Copy
+              className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
+              onClick={() => onDuplicate(question)}
+            />
+            <Trash
+              className="h-5 w-5 cursor-pointer text-gray-500 hover:text-red-600"
+              onClick={() => onDelete(question.id)}
+            />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-muted-foreground">Required</span>
+            <Checkbox
+              checked={question.required}
+              onCheckedChange={handleRequiredChange}
+            />
+          </div>
+
+          <div className="ml-2">
+            <Button variant="ghost" size="icon">
+              <MoreVertical className="h-5 w-5 text-gray-500" />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
 }
 
 // -- Sub-Components --
 
 function QuestionBody({
-    question,
-    onUpdate,
+  question,
+  onUpdate,
 }: {
-    question: FormQuestion;
-    onUpdate: (q: FormQuestion) => void;
+  question: FormQuestion;
+  onUpdate: (q: FormQuestion) => void;
 }) {
-    switch (question.type) {
-        case "short_answer":
-            return (
-                <div className="w-1/2 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
-                    Short answer text
-                </div>
-            );
-        case "paragraph":
-            return (
-                <div className="w-3/4 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
-                    Long answer text
-                </div>
-            );
-        case "multiple_choice":
-        case "checkboxes":
-        case "dropdown":
-            return <OptionList question={question} onUpdate={onUpdate} />;
-        case "date":
-            return (
-                <div className="flex items-center gap-2 text-gray-400">
-                    <Calendar className="h-5 w-5" />
-                    <span>Month, day, year</span>
-                </div>
-            );
-        case "time":
-            return (
-                <div className="flex items-center gap-2 text-gray-400">
-                    <Clock className="h-5 w-5" />
-                    <span>Time</span>
-                </div>
-            );
-        default:
-            return null;
-    }
+  switch (question.type) {
+    case "short_answer":
+      return (
+        <div className="w-1/2 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
+          Short answer text
+        </div>
+      );
+    case "paragraph":
+      return (
+        <div className="w-3/4 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
+          Long answer text
+        </div>
+      );
+    case "multiple_choice":
+    case "checkboxes":
+    case "dropdown":
+      return <OptionList question={question} onUpdate={onUpdate} />;
+    case "date":
+      return (
+        <div className="flex items-center gap-2 text-gray-400">
+          <Calendar className="h-5 w-5" />
+          <span>Month, day, year</span>
+        </div>
+      );
+    case "time":
+      return (
+        <div className="flex items-center gap-2 text-gray-400">
+          <Clock className="h-5 w-5" />
+          <span>Time</span>
+        </div>
+      );
+    default:
+      return null;
+  }
 }
 
 function OptionList({
-    question,
-    onUpdate,
+  question,
+  onUpdate,
 }: {
-    question: FormQuestion;
-    onUpdate: (q: FormQuestion) => void;
+  question: FormQuestion;
+  onUpdate: (q: FormQuestion) => void;
 }) {
-    const options = question.options || [];
-
-    const handleOptionChange = (id: string, newValue: string) => {
-        const newOptions = options.map((opt) =>
-            opt.id === id ? { ...opt, value: newValue } : opt
-        );
-        onUpdate({ ...question, options: newOptions });
-    };
-
-    const addOption = () => {
-        const newOption: QuestionOption = {
-            id: uuidv4(),
-            value: `Option ${options.length + 1}`,
-            isOther: false,
-        };
-        onUpdate({ ...question, options: [...options, newOption] });
-    };
+  const options = question.options || [];
 
-    const removeOption = (id: string) => {
-        const newOptions = options.filter((opt) => opt.id !== id);
-        onUpdate({ ...question, options: newOptions });
+  const handleOptionChange = (id: string, newValue: string) => {
+    const newOptions = options.map((opt) =>
+      opt.id === id ? { ...opt, value: newValue } : opt,
+    );
+    onUpdate({ ...question, options: newOptions });
+  };
+
+  const addOption = () => {
+    const newOption: QuestionOption = {
+      id: uuidv4(),
+      value: `Option ${options.length + 1}`,
+      isOther: false,
     };
-
-    const Icon =
-        question.type === "multiple_choice"
-            ? Circle
-            : question.type === "checkboxes"
-                ? CheckSquare
-                : Circle;
-
-    return (
-        <div className="flex flex-col gap-2">
-            {options.map((option, idx) => (
-                <div key={option.id} className="group flex items-center gap-2">
-                    {question.type === "dropdown" ? (
-                        <span className="w-6 text-center text-sm">{idx + 1}.</span>
-                    ) : (
-                        <Icon className="h-5 w-5 text-gray-300" />
-                    )}
-
-                    <Input
-                        value={option.value}
-                        onChange={(e) => handleOptionChange(option.id, e.target.value)}
-                        className="flex-1 border-none hover:border-b hover:border-gray-200 focus:border-b-2 focus:border-blue-500 focus:ring-0 rounded-none px-0"
-                        placeholder={`Option ${idx + 1}`}
-                        onKeyDown={(e) => {
-                            if (e.key === "Enter") {
-                                e.preventDefault();
-                                addOption();
-                            }
-                            if (e.key === "Backspace" && option.value === "") {
-                                e.preventDefault();
-                                removeOption(option.id);
-                            }
-                        }}
-                        autoFocus={idx === options.length - 1 && options.length > 1}
-                    />
-
-                    <Button
-                        variant="ghost"
-                        size="icon"
-                        className="opacity-0 group-hover:opacity-100 transition-opacity"
-                        onClick={() => removeOption(option.id)}
-                        tabIndex={-1}
-                    >
-                        <X className="h-5 w-5 text-gray-500" />
-                    </Button>
-                </div>
-            ))}
-
-            {/* Add Option Button */}
-            <div className="flex items-center gap-2 mt-1">
-                {question.type === "dropdown" ? (
-                    <span className="w-6 text-center text-sm">{options.length + 1}.</span>
-                ) : (
-                    <Icon className="h-5 w-5 text-transparent" />
-                )}
-
-                <div className="flex items-center gap-1 text-sm text-gray-500">
-                    <Button
-                        variant="ghost"
-                        className="h-auto px-0 py-1 text-gray-500 hover:text-gray-800 hover:bg-transparent"
-                        onClick={addOption}
-                    >
-                        Add option
-                    </Button>
-                </div>
-            </div>
+    onUpdate({ ...question, options: [...options, newOption] });
+  };
+
+  const removeOption = (id: string) => {
+    const newOptions = options.filter((opt) => opt.id !== id);
+    onUpdate({ ...question, options: newOptions });
+  };
+
+  const Icon =
+    question.type === "multiple_choice"
+      ? Circle
+      : question.type === "checkboxes"
+        ? CheckSquare
+        : Circle;
+
+  return (
+    <div className="flex flex-col gap-2">
+      {options.map((option, idx) => (
+        <div key={option.id} className="group flex items-center gap-2">
+          {question.type === "dropdown" ? (
+            <span className="w-6 text-center text-sm">{idx + 1}.</span>
+          ) : (
+            <Icon className="h-5 w-5 text-gray-300" />
+          )}
+
+          <Input
+            value={option.value}
+            onChange={(e) => handleOptionChange(option.id, e.target.value)}
+            className="flex-1 rounded-none border-none px-0 hover:border-b hover:border-gray-200 focus:border-b-2 focus:border-blue-500 focus:ring-0"
+            placeholder={`Option ${idx + 1}`}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                e.preventDefault();
+                addOption();
+              }
+              if (e.key === "Backspace" && option.value === "") {
+                e.preventDefault();
+                removeOption(option.id);
+              }
+            }}
+            autoFocus={idx === options.length - 1 && options.length > 1}
+          />
+
+          <Button
+            variant="ghost"
+            size="icon"
+            className="opacity-0 transition-opacity group-hover:opacity-100"
+            onClick={() => removeOption(option.id)}
+            tabIndex={-1}
+          >
+            <X className="h-5 w-5 text-gray-500" />
+          </Button>
         </div>
-    );
+      ))}
+
+      {/* Add Option Button */}
+      <div className="mt-1 flex items-center gap-2">
+        {question.type === "dropdown" ? (
+          <span className="w-6 text-center text-sm">{options.length + 1}.</span>
+        ) : (
+          <Icon className="h-5 w-5 text-transparent" />
+        )}
+
+        <div className="flex items-center gap-1 text-sm text-gray-500">
+          <Button
+            variant="ghost"
+            className="h-auto px-0 py-1 text-gray-500 hover:bg-transparent hover:text-gray-800"
+            onClick={addOption}
+          >
+            Add option
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 }

From c9a355c3d566b97d789bff8810288d82f3d7c389 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 20:42:03 -0800
Subject: [PATCH 03/13] Fixed Zod Schema and Updated UI with Drag n Drop, add
 question and Date/Time Funtionality. Got rid of old self made schema

---
 apps/blade/package.json                       |   3 +
 .../src/app/admin/forms/test-editor/page.tsx  | 228 ++++++++++++++----
 .../admin/forms/question-edit-card.tsx        | 150 ++++++------
 apps/blade/src/lib/types/form.ts              |  44 ----
 pnpm-lock.yaml                                |  58 +++++
 5 files changed, 321 insertions(+), 162 deletions(-)
 delete mode 100644 apps/blade/src/lib/types/form.ts

diff --git a/apps/blade/package.json b/apps/blade/package.json
index f4db10917..109f97288 100644
--- a/apps/blade/package.json
+++ b/apps/blade/package.json
@@ -17,6 +17,9 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.717.0",
     "@aws-sdk/s3-request-presigner": "^3.717.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@forge/api": "workspace:*",
     "@forge/auth": "workspace:*",
     "@forge/consts": "workspace:*",
diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index 19c279721..e75a2360c 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -1,67 +1,197 @@
 "use client";
 
+import type { CSSProperties } from "react";
 import { useState } from "react";
+import {
+  DndContext,
+  DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  closestCenter,
+  useSensor,
+  useSensors,
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Plus } from "lucide-react";
+import { z } from "zod";
+
+import type { QuestionValidator } from "@forge/consts/knight-hacks";
+import { Button } from "@forge/ui/button";
+import { Card } from "@forge/ui/card";
+import { Input } from "@forge/ui/input";
+import { Textarea } from "@forge/ui/textarea";
 
-import type { FormQuestion } from "~/lib/types/form";
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
 
-// Replaced uuid import with native crypto.randomUUID for simplicity and to avoid adding dependencies
-// import { v4 as uuidv4 } from "uuid";
-const uuidv4 = () => crypto.randomUUID();
-
-export default function TestEditorPage() {
-  const [question, setQuestion] = useState<FormQuestion>({
-    id: uuidv4(),
-    title: "Untitled Question",
-    type: "multiple_choice",
-    required: false,
-    options: [{ id: uuidv4(), value: "Option 1", isOther: false }],
-  });
-
-  const handleUpdate = (updatedQuestion: FormQuestion) => {
-    console.log("Updated Question:", updatedQuestion);
-    setQuestion(updatedQuestion);
+type FormQuestion = z.infer<typeof QuestionValidator>;
+type UIQuestion = FormQuestion & { id: string };
+
+// Wrapper for Sortable item
+function SortableQuestion({
+  question,
+  isActive,
+  onUpdate,
+  onDelete,
+  onDuplicate,
+  onClick,
+}: {
+  question: UIQuestion;
+  isActive: boolean;
+  onUpdate: (q: UIQuestion) => void;
+  onDelete: (id: string) => void;
+  onDuplicate: (q: FormQuestion) => void;
+  onClick: () => void;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: question.id });
+
+  const style: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes}>
+      <div onClick={onClick}>
+        <QuestionEditCard
+          question={question}
+          isActive={isActive}
+          onUpdate={onUpdate}
+          onDelete={onDelete}
+          onDuplicate={onDuplicate}
+          dragHandleProps={listeners}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default function FormEditorPage() {
+  const [questions, setQuestions] = useState<UIQuestion[]>([
+    {
+      id: crypto.randomUUID(),
+      question: "Untitled Question",
+      type: "SHORT_ANSWER",
+      optional: true,
+    },
+  ]);
+
+  const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      setQuestions((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  };
+
+  const addQuestion = () => {
+    const newId = crypto.randomUUID();
+    const newQuestion: UIQuestion = {
+      id: newId,
+      question: "Untitled Question",
+      type: "SHORT_ANSWER",
+      optional: true,
+    };
+    setQuestions([...questions, newQuestion]);
+    setActiveQuestionId(newId);
   };
 
-  const handleDelete = (id: string) => {
-    console.log("Delete Question:", id);
-    alert("Delete clicked for id: " + id);
+  const updateQuestion = (updatedQ: UIQuestion) => {
+    setQuestions((prev) =>
+      prev.map((q) => (q.id === updatedQ.id ? updatedQ : q)),
+    );
   };
 
-  const handleDuplicate = (q: FormQuestion) => {
-    console.log("Duplicate Question:", q);
-    alert("Duplicate clicked");
+  const deleteQuestion = (id: string) => {
+    setQuestions((prev) => prev.filter((q) => q.id !== id));
+    if (activeQuestionId === id) {
+      setActiveQuestionId(null);
+    }
+  };
+
+  const duplicateQuestion = (q: FormQuestion) => {
+    const newId = crypto.randomUUID();
+    const newQ = { ...q, id: newId };
+    setQuestions((prev) => [...prev, newQ]);
+    setActiveQuestionId(newId);
   };
 
   return (
-    <div className="flex min-h-screen items-start justify-center bg-muted/30 p-8">
-      <div className="w-full max-w-3xl space-y-6">
-        <div className="rounded-t-lg border-t-8 border-primary bg-card p-6 shadow-sm">
-          <h1 className="text-3xl font-bold tracking-tight">
-            Ripoff Google Form by KH test
-          </h1>
-          <p className="mt-2 text-muted-foreground">
-            Welcome to the awesome bootleg google form by KH mindblown emoji*
-          </p>
-        </div>
+    <div className="min-h-screen bg-primary/5 p-8 pb-32">
+      <div className="mx-auto max-w-3xl space-y-6">
+        {/* Form Title Card */}
+        <Card className="border-t-[10px] border-t-primary bg-card shadow-sm">
+          <div className="flex flex-col gap-4 p-6">
+            <Input
+              className="border-none px-0 text-3xl font-bold focus-visible:ring-0 md:text-4xl"
+              placeholder="Form Title"
+              defaultValue="Untitled Form"
+            />
+            <Textarea
+              className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
+              placeholder="Form description"
+              defaultValue="Form description goes here"
+            />
+          </div>
+        </Card>
 
-        <div className="bg-transparent">
-          <QuestionEditCard
-            question={question}
-            isActive={true}
-            onUpdate={handleUpdate}
-            onDelete={handleDelete}
-            onDuplicate={handleDuplicate}
-          />
+        {/* Questions List */}
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext
+            items={questions}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-4">
+              {questions.map((q) => (
+                <SortableQuestion
+                  key={q.id}
+                  question={q}
+                  isActive={activeQuestionId === q.id}
+                  onUpdate={updateQuestion}
+                  onDelete={deleteQuestion}
+                  onDuplicate={duplicateQuestion}
+                  onClick={() => setActiveQuestionId(q.id)}
+                />
+              ))}
+            </div>
+          </SortableContext>
+        </DndContext>
+
+        <div className="flex justify-center pt-4">
+          <Button
+            onClick={addQuestion}
+            size="lg"
+            className="gap-2 rounded-full shadow-lg transition-all hover:-translate-y-0.5"
+          >
+            <Plus className="h-5 w-5" />
+            Add Question
+          </Button>
         </div>
       </div>
-
-      {/* <div className="p-4 bg-card rounded-md border shadow-sm">
-                <h2 className="text-lg font-semibold mb-2">Current State (Debug)</h2>
-                <pre className="text-xs overflow-auto max-h-96 text-muted-foreground font-mono bg-muted p-4 rounded">
-                    {JSON.stringify(question, null, 2)}
-                </pre>
-            </div> */}
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
index d7e132a27..3dcca80a3 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import type { DraggableSyntheticListeners } from "@dnd-kit/core";
 import * as React from "react";
 import {
   AlignLeft,
@@ -16,11 +17,14 @@ import {
   Trash,
   X,
 } from "lucide-react";
+import type { z } from "zod";
 
+import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
 import { Checkbox } from "@forge/ui/checkbox";
+import { DatePicker } from "@forge/ui/date-picker";
 import { Input } from "@forge/ui/input";
 import {
   Select,
@@ -30,17 +34,18 @@ import {
   SelectValue,
 } from "@forge/ui/select";
 import { Textarea } from "@forge/ui/textarea";
+import { TimePicker } from "@forge/ui/time-picker";
 
-import { FormQuestion, QuestionOption, QuestionType } from "~/lib/types/form";
-
-const uuidv4 = () => crypto.randomUUID();
+type FormQuestion = z.infer<typeof QuestionValidator>;
+type QuestionType = FormQuestion["type"];
 
 interface QuestionEditCardProps {
-  question: FormQuestion;
+  question: FormQuestion & { id: string };
   isActive: boolean;
-  onUpdate: (updatedQuestion: FormQuestion) => void;
+  onUpdate: (updatedQuestion: FormQuestion & { id: string }) => void;
   onDelete: (id: string) => void;
-  onDuplicate: (question: FormQuestion) => void;
+  onDuplicate: (question: FormQuestion & { id: string }) => void;
+  dragHandleProps?: DraggableSyntheticListeners;
 }
 
 const QUESTION_TYPES: {
@@ -48,13 +53,13 @@ const QUESTION_TYPES: {
   label: string;
   icon: React.ElementType;
 }[] = [
-  { value: "short_answer", label: "Short answer", icon: AlignLeft },
-  { value: "paragraph", label: "Paragraph", icon: Pilcrow },
-  { value: "multiple_choice", label: "Multiple choice", icon: CircleDot },
-  { value: "checkboxes", label: "Checkboxes", icon: CheckSquare },
-  { value: "dropdown", label: "Dropdown", icon: ChevronDown },
-  { value: "date", label: "Date", icon: Calendar },
-  { value: "time", label: "Time", icon: Clock },
+  { value: "SHORT_ANSWER", label: "Short answer", icon: AlignLeft },
+  { value: "PARAGRAPH", label: "Paragraph", icon: Pilcrow },
+  { value: "MULTIPLE_CHOICE", label: "Multiple choice", icon: CircleDot },
+  { value: "CHECKBOXES", label: "Checkboxes", icon: CheckSquare },
+  { value: "DROPDOWN", label: "Dropdown", icon: ChevronDown },
+  { value: "DATE", label: "Date", icon: Calendar },
+  { value: "TIME", label: "Time", icon: Clock },
 ];
 
 export function QuestionEditCard({
@@ -63,26 +68,25 @@ export function QuestionEditCard({
   onUpdate,
   onDelete,
   onDuplicate,
+  dragHandleProps,
 }: QuestionEditCardProps) {
   // -- Handlers --
 
   const handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    onUpdate({ ...question, title: e.target.value });
+    onUpdate({ ...question, question: e.target.value });
   };
 
   const handleTypeChange = (newType: QuestionType) => {
     const updatedQuestion = { ...question, type: newType };
 
     if (
-      ["multiple_choice", "checkboxes", "dropdown"].includes(newType) &&
+      ["MULTIPLE_CHOICE", "CHECKBOXES", "DROPDOWN"].includes(newType) &&
       (!question.options || question.options.length === 0)
     ) {
-      updatedQuestion.options = [
-        { id: uuidv4(), value: "Option 1", isOther: false },
-      ];
+      updatedQuestion.options = ["Option 1"];
     }
 
-    if (["short_answer", "paragraph", "date", "time"].includes(newType)) {
+    if (["SHORT_ANSWER", "PARAGRAPH", "DATE", "TIME"].includes(newType)) {
       updatedQuestion.options = undefined;
     }
 
@@ -90,9 +94,11 @@ export function QuestionEditCard({
   };
 
   const handleRequiredChange = (checked: boolean) => {
-    onUpdate({ ...question, required: checked });
+    onUpdate({ ...question, optional: !checked });
   };
 
+  // The 'question' prop now includes 'id' via the extended type.
+
   return (
     <Card
       className={cn(
@@ -101,15 +107,15 @@ export function QuestionEditCard({
           ? "border-l-primary shadow-md ring-1 ring-black/5"
           : "border-l-transparent hover:bg-muted/50",
       )}
-      onClick={(e) => {
-        e.stopPropagation();
+      onClick={() => {
+        // Allow propagation so parent can set active state
       }}
     >
       {/* Header */}
       <div className="flex flex-col gap-4 md:flex-row md:items-start">
         <div className="flex-1 rounded-md bg-muted/50 p-2 transition-colors focus-within:bg-muted focus-within:ring-1 focus-within:ring-primary/20">
           <Textarea
-            value={question.title}
+            value={question.question}
             onChange={handleTitleChange}
             placeholder="Question"
             className="min-h-[3rem] resize-none overflow-hidden border-none bg-transparent px-0 py-0 text-lg font-medium placeholder:text-muted-foreground focus-visible:ring-0"
@@ -152,7 +158,10 @@ export function QuestionEditCard({
 
       {/* Footer */}
       <div className="mt-4 flex items-center justify-between gap-2 border-t pt-4">
-        <div className="cursor-move text-gray-300 hover:text-gray-500">
+        <div
+          className="cursor-move text-gray-300 hover:text-gray-500"
+          {...dragHandleProps}
+        >
           <GripHorizontal className="h-5 w-5 rotate-90" />
         </div>
         <div className="flex items-center justify-end gap-2">
@@ -170,7 +179,7 @@ export function QuestionEditCard({
           <div className="flex items-center gap-2">
             <span className="text-sm text-muted-foreground">Required</span>
             <Checkbox
-              checked={question.required}
+              checked={!question.optional}
               onCheckedChange={handleRequiredChange}
             />
           </div>
@@ -192,38 +201,44 @@ function QuestionBody({
   question,
   onUpdate,
 }: {
-  question: FormQuestion;
-  onUpdate: (q: FormQuestion) => void;
+  question: FormQuestion & { id: string };
+  onUpdate: (q: FormQuestion & { id: string }) => void;
 }) {
   switch (question.type) {
-    case "short_answer":
+    case "SHORT_ANSWER":
       return (
-        <div className="w-1/2 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
-          Short answer text
+        <div className="w-1/2">
+          <Input
+            placeholder="Short answer text"
+            className="rounded-none border-x-0 border-b border-t-0 border-gray-300 bg-transparent px-0 shadow-none outline-none focus-visible:border-b-2 focus-visible:border-primary focus-visible:ring-0"
+            disabled={false}
+          />
         </div>
       );
-    case "paragraph":
+    case "PARAGRAPH":
       return (
-        <div className="w-3/4 border-b border-dotted border-gray-300 py-2 text-sm text-gray-400">
-          Long answer text
+        <div className="w-full">
+          <Textarea
+            placeholder="Long answer text"
+            className="resize-none rounded-none border-x-0 border-b border-t-0 border-gray-300 bg-transparent px-0 shadow-none outline-none focus-visible:border-b-2 focus-visible:border-primary focus-visible:ring-0"
+            disabled={false}
+          />
         </div>
       );
-    case "multiple_choice":
-    case "checkboxes":
-    case "dropdown":
+    case "MULTIPLE_CHOICE":
+    case "CHECKBOXES":
+    case "DROPDOWN":
       return <OptionList question={question} onUpdate={onUpdate} />;
-    case "date":
+    case "DATE":
       return (
-        <div className="flex items-center gap-2 text-gray-400">
-          <Calendar className="h-5 w-5" />
-          <span>Month, day, year</span>
+        <div className="flex items-center gap-2">
+          <DatePicker />
         </div>
       );
-    case "time":
+    case "TIME":
       return (
-        <div className="flex items-center gap-2 text-gray-400">
-          <Clock className="h-5 w-5" />
-          <span>Time</span>
+        <div className="flex items-center gap-2">
+          <TimePicker />
         </div>
       );
     default:
@@ -235,52 +250,49 @@ function OptionList({
   question,
   onUpdate,
 }: {
-  question: FormQuestion;
-  onUpdate: (q: FormQuestion) => void;
+  question: FormQuestion & { id: string };
+  onUpdate: (q: FormQuestion & { id: string }) => void;
 }) {
   const options = question.options || [];
 
-  const handleOptionChange = (id: string, newValue: string) => {
-    const newOptions = options.map((opt) =>
-      opt.id === id ? { ...opt, value: newValue } : opt,
-    );
+  const handleOptionChange = (index: number, newValue: string) => {
+    const newOptions = [...options];
+    newOptions[index] = newValue;
     onUpdate({ ...question, options: newOptions });
   };
 
   const addOption = () => {
-    const newOption: QuestionOption = {
-      id: uuidv4(),
-      value: `Option ${options.length + 1}`,
-      isOther: false,
-    };
-    onUpdate({ ...question, options: [...options, newOption] });
+    onUpdate({
+      ...question,
+      options: [...options, `Option ${options.length + 1}`],
+    });
   };
 
-  const removeOption = (id: string) => {
-    const newOptions = options.filter((opt) => opt.id !== id);
+  const removeOption = (index: number) => {
+    const newOptions = options.filter((_, i) => i !== index);
     onUpdate({ ...question, options: newOptions });
   };
 
   const Icon =
-    question.type === "multiple_choice"
+    question.type === "MULTIPLE_CHOICE"
       ? Circle
-      : question.type === "checkboxes"
+      : question.type === "CHECKBOXES"
         ? CheckSquare
         : Circle;
 
   return (
     <div className="flex flex-col gap-2">
-      {options.map((option, idx) => (
-        <div key={option.id} className="group flex items-center gap-2">
-          {question.type === "dropdown" ? (
+      {options.map((optionValue, idx) => (
+        <div key={idx} className="group flex items-center gap-2">
+          {question.type === "DROPDOWN" ? (
             <span className="w-6 text-center text-sm">{idx + 1}.</span>
           ) : (
             <Icon className="h-5 w-5 text-gray-300" />
           )}
 
           <Input
-            value={option.value}
-            onChange={(e) => handleOptionChange(option.id, e.target.value)}
+            value={optionValue}
+            onChange={(e) => handleOptionChange(idx, e.target.value)}
             className="flex-1 rounded-none border-none px-0 hover:border-b hover:border-gray-200 focus:border-b-2 focus:border-blue-500 focus:ring-0"
             placeholder={`Option ${idx + 1}`}
             onKeyDown={(e) => {
@@ -288,9 +300,9 @@ function OptionList({
                 e.preventDefault();
                 addOption();
               }
-              if (e.key === "Backspace" && option.value === "") {
+              if (e.key === "Backspace" && optionValue === "") {
                 e.preventDefault();
-                removeOption(option.id);
+                removeOption(idx);
               }
             }}
             autoFocus={idx === options.length - 1 && options.length > 1}
@@ -300,7 +312,7 @@ function OptionList({
             variant="ghost"
             size="icon"
             className="opacity-0 transition-opacity group-hover:opacity-100"
-            onClick={() => removeOption(option.id)}
+            onClick={() => removeOption(idx)}
             tabIndex={-1}
           >
             <X className="h-5 w-5 text-gray-500" />
@@ -310,7 +322,7 @@ function OptionList({
 
       {/* Add Option Button */}
       <div className="mt-1 flex items-center gap-2">
-        {question.type === "dropdown" ? (
+        {question.type === "DROPDOWN" ? (
           <span className="w-6 text-center text-sm">{options.length + 1}.</span>
         ) : (
           <Icon className="h-5 w-5 text-transparent" />
diff --git a/apps/blade/src/lib/types/form.ts b/apps/blade/src/lib/types/form.ts
deleted file mode 100644
index 331728e42..000000000
--- a/apps/blade/src/lib/types/form.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { z } from "zod";
-
-export const QuestionTypeEnum = z.enum([
-  "short_answer",
-  "paragraph",
-  "multiple_choice",
-  "checkboxes",
-  "dropdown",
-  "date",
-  "time",
-]);
-
-export type QuestionType = z.infer<typeof QuestionTypeEnum>;
-
-// Option Schema for Choice Questions
-export const QuestionOptionSchema = z.object({
-  id: z.string().uuid(),
-  value: z.string(),
-  isOther: z.boolean().default(false), // Logic for "Other" option
-});
-
-export const FormQuestionSchema = z.object({
-  id: z.string().uuid(),
-  title: z.string().min(1, "Question title is required"),
-  description: z.string().optional(),
-  type: QuestionTypeEnum,
-  required: z.boolean().default(false),
-
-  // Data specific to types
-  options: z.array(QuestionOptionSchema).optional(),
-  placeholder: z.string().optional(), // For text inputs
-
-  // Validation constraints (optional for V1 but good to have)
-  validation: z
-    .object({
-      min: z.number().optional(),
-      max: z.number().optional(),
-      regex: z.string().optional(),
-    })
-    .optional(),
-});
-
-export type FormQuestion = z.infer<typeof FormQuestionSchema>;
-export type QuestionOption = z.infer<typeof QuestionOptionSchema>;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cd7efa508..751f5d5c1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -169,6 +169,15 @@ importers:
       '@aws-sdk/s3-request-presigner':
         specifier: ^3.717.0
         version: 3.717.0
+      '@dnd-kit/core':
+        specifier: ^6.3.1
+        version: 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/sortable':
+        specifier: ^10.0.0
+        version: 10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities':
+        specifier: ^3.2.2
+        version: 3.2.2(react@18.3.1)
       '@forge/api':
         specifier: workspace:*
         version: link:../../packages/api
@@ -2015,6 +2024,28 @@ packages:
     resolution: {integrity: sha512-PZ+vLpxGCRtmr2RMkqh8Zp+BenUaJqlS6xhgWKEZcgC/vfHLEzpHtKkB0sl3nZWpwtcKk6YWy+pU3okL2I97FA==}
     engines: {node: '>=16.11.0'}
 
+  '@dnd-kit/accessibility@3.1.1':
+    resolution: {integrity: sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==}
+    peerDependencies:
+      react: ^18.3.1
+
+  '@dnd-kit/core@6.3.1':
+    resolution: {integrity: sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==}
+    peerDependencies:
+      react: ^18.3.1
+      react-dom: ^18.3.1
+
+  '@dnd-kit/sortable@10.0.0':
+    resolution: {integrity: sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==}
+    peerDependencies:
+      '@dnd-kit/core': ^6.3.0
+      react: ^18.3.1
+
+  '@dnd-kit/utilities@3.2.2':
+    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==}
+    peerDependencies:
+      react: ^18.3.1
+
   '@drizzle-team/brocli@0.10.2':
     resolution: {integrity: sha512-z33Il7l5dKjUgGULTqBsQBQwckHh5AbIuxhdsIxDDiZAzBOrZO6q9ogcWC65kU382AfynTfgNumVcNIjuIua6w==}
 
@@ -7882,6 +7913,7 @@ packages:
   next@14.2.28:
     resolution: {integrity: sha512-QLEIP/kYXynIxtcKB6vNjtWLVs3Y4Sb+EClTC/CSVzdLD1gIuItccpu/n1lhmduffI32iPGEK2cLLxxt28qgYA==}
     engines: {node: '>=18.17.0'}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/security-update-2025-12-11 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -7900,6 +7932,7 @@ packages:
   next@15.4.1:
     resolution: {integrity: sha512-eNKB1q8C7o9zXF8+jgJs2CzSLIU3T6bQtX6DcTnCq1sIR1CJ0GlSyRs1BubQi3/JgCnr9Vr+rS5mOMI38FFyQw==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
+    deprecated: This version has a security vulnerability. Please upgrade to a patched version. See https://nextjs.org/blog/CVE-2025-66478 for more details.
     hasBin: true
     peerDependencies:
       '@opentelemetry/api': ^1.1.0
@@ -11293,6 +11326,31 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
+  '@dnd-kit/accessibility@3.1.1(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/accessibility': 3.1.1(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+      tslib: 2.8.1
+
+  '@dnd-kit/sortable@10.0.0(@dnd-kit/core@6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@dnd-kit/core': 6.3.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@dnd-kit/utilities': 3.2.2(react@18.3.1)
+      react: 18.3.1
+      tslib: 2.8.1
+
+  '@dnd-kit/utilities@3.2.2(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+      tslib: 2.8.1
+
   '@drizzle-team/brocli@0.10.2': {}
 
   '@emnapi/core@1.4.3':

From 46a0a8ee123f72aca4886109cb97022b5ab92eb3 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 21:14:30 -0800
Subject: [PATCH 04/13] Minor Prettier Fix

---
 apps/blade/src/app/admin/forms/test-editor/page.tsx         | 6 +++---
 .../blade/src/components/admin/forms/question-edit-card.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index e75a2360c..d435f31f8 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -3,17 +3,17 @@
 import type { CSSProperties } from "react";
 import { useState } from "react";
 import {
+  closestCenter,
   DndContext,
   DragEndEvent,
   KeyboardSensor,
   PointerSensor,
-  closestCenter,
   useSensor,
   useSensors,
 } from "@dnd-kit/core";
 import {
-  SortableContext,
   arrayMove,
+  SortableContext,
   sortableKeyboardCoordinates,
   useSortable,
   verticalListSortingStrategy,
@@ -194,4 +194,4 @@ export default function FormEditorPage() {
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
index 3dcca80a3..9e8dede8a 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
+import type { z } from "zod";
 import * as React from "react";
 import {
   AlignLeft,
@@ -17,7 +18,6 @@ import {
   Trash,
   X,
 } from "lucide-react";
-import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";

From 4b28a7eeef45e04a7940f16872cb6962acb6840d Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 21:23:24 -0800
Subject: [PATCH 05/13] Changed import to import type to fix minor error (for
 sanity)

---
 apps/blade/src/app/admin/forms/test-editor/page.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index d435f31f8..af225cb62 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -2,10 +2,11 @@
 
 import type { CSSProperties } from "react";
 import { useState } from "react";
+import type {
+  DragEndEvent} from "@dnd-kit/core";
 import {
   closestCenter,
   DndContext,
-  DragEndEvent,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -20,7 +21,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Plus } from "lucide-react";
-import { z } from "zod";
+import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";

From 9a8d098fb1a4385777ee9b17216a45ce0c1843f0 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Fri, 19 Dec 2025 21:33:37 -0800
Subject: [PATCH 06/13] Prettier fix AGAIN (last commit for today...hopefully)

---
 apps/blade/src/app/admin/forms/test-editor/page.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index af225cb62..faf03ca52 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
+import type { DragEndEvent } from "@dnd-kit/core";
 import type { CSSProperties } from "react";
+import type { z } from "zod";
 import { useState } from "react";
-import type {
-  DragEndEvent} from "@dnd-kit/core";
 import {
   closestCenter,
   DndContext,
@@ -21,7 +21,6 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Plus } from "lucide-react";
-import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";

From 4bb23fab2c13c32d5b5b7d5ef99a39bd1566d9d2 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Sat, 20 Dec 2025 19:05:51 -0800
Subject: [PATCH 07/13] Moved consts to @forge/consts package and added console
 logs to show form contents

---
 .../src/app/admin/forms/test-editor/page.tsx  | 21 ++++++++--
 .../admin/forms/question-edit-card.tsx        | 42 +++++++++----------
 packages/consts/src/knight-hacks.ts           | 12 ++++++
 3 files changed, 51 insertions(+), 24 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index faf03ca52..e0d161e6a 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -3,7 +3,7 @@
 import type { DragEndEvent } from "@dnd-kit/core";
 import type { CSSProperties } from "react";
 import type { z } from "zod";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   closestCenter,
   DndContext,
@@ -74,6 +74,10 @@ function SortableQuestion({
 }
 
 export default function FormEditorPage() {
+  const [formTitle, setFormTitle] = useState("Untitled Form");
+  const [formDescription, setFormDescription] = useState(
+    "Form description goes here",
+  );
   const [questions, setQuestions] = useState<UIQuestion[]>([
     {
       id: crypto.randomUUID(),
@@ -82,6 +86,15 @@ export default function FormEditorPage() {
       optional: true,
     },
   ]);
+  //Printing from page.tsx
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    console.log("UPDATED FORM STATE (Page Level):", {
+      title: formTitle,
+      description: formDescription,
+      questions,
+    });
+  }, [questions, formTitle, formDescription]);
 
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 
@@ -145,12 +158,14 @@ export default function FormEditorPage() {
             <Input
               className="border-none px-0 text-3xl font-bold focus-visible:ring-0 md:text-4xl"
               placeholder="Form Title"
-              defaultValue="Untitled Form"
+              value={formTitle}
+              onChange={(e) => setFormTitle(e.target.value)}
             />
             <Textarea
               className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
               placeholder="Form description"
-              defaultValue="Form description goes here"
+              value={formDescription}
+              onChange={(e) => setFormDescription(e.target.value)}
             />
           </div>
         </Card>
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
index 9e8dede8a..5bbf986ef 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -20,6 +20,7 @@ import {
 } from "lucide-react";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
+import { FORM_QUESTION_TYPES } from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
@@ -48,19 +49,15 @@ interface QuestionEditCardProps {
   dragHandleProps?: DraggableSyntheticListeners;
 }
 
-const QUESTION_TYPES: {
-  value: QuestionType;
-  label: string;
-  icon: React.ElementType;
-}[] = [
-  { value: "SHORT_ANSWER", label: "Short answer", icon: AlignLeft },
-  { value: "PARAGRAPH", label: "Paragraph", icon: Pilcrow },
-  { value: "MULTIPLE_CHOICE", label: "Multiple choice", icon: CircleDot },
-  { value: "CHECKBOXES", label: "Checkboxes", icon: CheckSquare },
-  { value: "DROPDOWN", label: "Dropdown", icon: ChevronDown },
-  { value: "DATE", label: "Date", icon: Calendar },
-  { value: "TIME", label: "Time", icon: Clock },
-];
+const QUESTION_ICONS: Record<string, React.ElementType> = {
+  SHORT_ANSWER: AlignLeft,
+  PARAGRAPH: Pilcrow,
+  MULTIPLE_CHOICE: CircleDot,
+  CHECKBOXES: CheckSquare,
+  DROPDOWN: ChevronDown,
+  DATE: Calendar,
+  TIME: Clock,
+};
 
 export function QuestionEditCard({
   question,
@@ -138,14 +135,17 @@ export function QuestionEditCard({
               <SelectValue placeholder="Select type" />
             </SelectTrigger>
             <SelectContent>
-              {QUESTION_TYPES.map((type) => (
-                <SelectItem key={type.value} value={type.value}>
-                  <div className="flex items-center gap-3">
-                    <type.icon className="h-4 w-4" />
-                    <span>{type.label}</span>
-                  </div>
-                </SelectItem>
-              ))}
+              {FORM_QUESTION_TYPES.map((type) => {
+                const Icon = QUESTION_ICONS[type.value];
+                return (
+                  <SelectItem key={type.value} value={type.value}>
+                    <div className="flex items-center gap-3">
+                      {Icon && <Icon className="h-4 w-4" />}
+                      <span>{type.label}</span>
+                    </div>
+                  </SelectItem>
+                );
+              })}
             </SelectContent>
           </Select>
         </div>
diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index fc4185c42..f56188f39 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6679,7 +6679,19 @@ export const FormSchemaValidator = z.object({
 
 export type FormType = z.infer<typeof FormSchemaValidator>;
 
+
 type QuestionValidatorType = z.infer<typeof QuestionValidator>;
 export type ValidatorOptions = Omit<QuestionValidatorType, "question">;
 
 export type QuestionsType = z.infer<typeof QuestionValidator>["type"];
+
+export const FORM_QUESTION_TYPES = [
+  { value: "SHORT_ANSWER", label: "Short answer" },
+  { value: "PARAGRAPH", label: "Paragraph" },
+  { value: "MULTIPLE_CHOICE", label: "Multiple choice" },
+  { value: "CHECKBOXES", label: "Checkboxes" },
+  { value: "DROPDOWN", label: "Dropdown" },
+  { value: "DATE", label: "Date" },
+  { value: "TIME", label: "Time" },
+] as const;
+

From 78cf0c29a45c37b4de0791422eb0131469e1447d Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Sat, 20 Dec 2025 19:12:13 -0800
Subject: [PATCH 08/13] Prettier fix once more

---
 packages/consts/src/knight-hacks.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index f56188f39..3079c6d58 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6679,7 +6679,6 @@ export const FormSchemaValidator = z.object({
 
 export type FormType = z.infer<typeof FormSchemaValidator>;
 
-
 type QuestionValidatorType = z.infer<typeof QuestionValidator>;
 export type ValidatorOptions = Omit<QuestionValidatorType, "question">;
 
@@ -6694,4 +6693,3 @@ export const FORM_QUESTION_TYPES = [
   { value: "DATE", label: "Date" },
   { value: "TIME", label: "Time" },
 ] as const;
-

From 1671a9aeccef84eff3c4e2213e092d9ace5a4df6 Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Sat, 20 Dec 2025 20:44:49 -0800
Subject: [PATCH 09/13] Format has name, desc, banner and ques now, also added
 save button with code to connect to createform but commented for now

---
 .../src/app/admin/forms/test-editor/page.tsx  | 50 ++++++++++++++++++-
 1 file changed, 48 insertions(+), 2 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index e0d161e6a..7c07ff176 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -30,6 +30,8 @@ import { Textarea } from "@forge/ui/textarea";
 
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
 
+// import { api } from "~/trpc/react";
+
 type FormQuestion = z.infer<typeof QuestionValidator>;
 type UIQuestion = FormQuestion & { id: string };
 
@@ -78,6 +80,7 @@ export default function FormEditorPage() {
   const [formDescription, setFormDescription] = useState(
     "Form description goes here",
   );
+  const [formBanner, setFormBanner] = useState("");
   const [questions, setQuestions] = useState<UIQuestion[]>([
     {
       id: crypto.randomUUID(),
@@ -86,15 +89,43 @@ export default function FormEditorPage() {
       optional: true,
     },
   ]);
+
+  /*
+  const createFormMutation = api.forms.createForm.useMutation({
+    onSuccess: () => {
+      alert("Form saved successfully!");
+    },
+    onError: (error) => {
+      // eslint-disable-next-line no-console
+      console.error("Failed to save form:", error);
+      alert("Failed to save form. Check console for why");
+    },
+  });
+
+  const handleSaveForm = () => {
+    createFormMutation.mutate({
+      name: formTitle,
+      description: formDescription,
+      banner: formBanner || undefined,
+      questions: questions.map((q) => {
+        // Remove local 'id' before sending to backend
+        const { id: _id, ...rest } = q;
+        return rest;
+      }),
+    });
+  };
+  */
+
   //Printing from page.tsx
   useEffect(() => {
     // eslint-disable-next-line no-console
     console.log("UPDATED FORM STATE (Page Level):", {
-      title: formTitle,
+      name: formTitle,
       description: formDescription,
+      banner: formBanner,
       questions,
     });
-  }, [questions, formTitle, formDescription]);
+  }, [questions, formTitle, formDescription, formBanner]);
 
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 
@@ -152,6 +183,15 @@ export default function FormEditorPage() {
   return (
     <div className="min-h-screen bg-primary/5 p-8 pb-32">
       <div className="mx-auto max-w-3xl space-y-6">
+        {/* <div className="flex justify-end">
+          <Button
+            onClick={handleSaveForm}
+            disabled={createFormMutation.isPending}
+          >
+            {createFormMutation.isPending ? "Saving..." : "Save Form"}
+          </Button>
+        </div> */}
+
         {/* Form Title Card */}
         <Card className="border-t-[10px] border-t-primary bg-card shadow-sm">
           <div className="flex flex-col gap-4 p-6">
@@ -161,6 +201,12 @@ export default function FormEditorPage() {
               value={formTitle}
               onChange={(e) => setFormTitle(e.target.value)}
             />
+            <Input
+              className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
+              placeholder="Banner Image URL (optional)"
+              value={formBanner}
+              onChange={(e) => setFormBanner(e.target.value)}
+            />
             <Textarea
               className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
               placeholder="Form description"

From b8b5d57d03b8b3ae84c9c553975dfb90560bfa4b Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Sat, 20 Dec 2025 23:10:44 -0800
Subject: [PATCH 10/13] Question answers no longer editable, Auto-save on card
 switch, commented optional menu on card, Should check URL on banners for
 cryptic error prevention

---
 .../src/app/admin/forms/test-editor/page.tsx  | 56 +++++++++++++++----
 .../admin/forms/question-edit-card.tsx        | 13 ++---
 2 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index 7c07ff176..4eec612f3 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -2,8 +2,7 @@
 
 import type { DragEndEvent } from "@dnd-kit/core";
 import type { CSSProperties } from "react";
-import type { z } from "zod";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   closestCenter,
   DndContext,
@@ -21,6 +20,7 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Plus } from "lucide-react";
+import * as z from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";
@@ -29,8 +29,7 @@ import { Input } from "@forge/ui/input";
 import { Textarea } from "@forge/ui/textarea";
 
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
-
-// import { api } from "~/trpc/react";
+import { api } from "~/trpc/react";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;
 type UIQuestion = FormQuestion & { id: string };
@@ -90,23 +89,35 @@ export default function FormEditorPage() {
     },
   ]);
 
-  /*
+  const [saveStatus, setSaveStatus] = useState<string>("");
+
   const createFormMutation = api.forms.createForm.useMutation({
+    onMutate: () => {
+      setSaveStatus("Saving...");
+    },
     onSuccess: () => {
-      alert("Form saved successfully!");
+      // eslint-disable-next-line no-console
+      console.log("Form saved successfully!");
+      setSaveStatus(`All changes saved at ${new Date().toLocaleTimeString()}`);
     },
     onError: (error) => {
       // eslint-disable-next-line no-console
       console.error("Failed to save form:", error);
-      alert("Failed to save form. Check console for why");
+      setSaveStatus("Failed to save. Check console for details.");
     },
   });
 
   const handleSaveForm = () => {
+    // Validate banner - strictly ensure it's a URL or empty
+    const bannerUrl =
+      formBanner && z.string().url().safeParse(formBanner).success
+        ? formBanner
+        : undefined;
+
     createFormMutation.mutate({
       name: formTitle,
       description: formDescription,
-      banner: formBanner || undefined,
+      banner: bannerUrl,
       questions: questions.map((q) => {
         // Remove local 'id' before sending to backend
         const { id: _id, ...rest } = q;
@@ -114,7 +125,6 @@ export default function FormEditorPage() {
       }),
     });
   };
-  */
 
   //Printing from page.tsx
   useEffect(() => {
@@ -129,6 +139,16 @@ export default function FormEditorPage() {
 
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 
+  // Auto-save when clicking off a card (active question changes)
+  const prevActiveQuestionId = useRef<string | null>(null);
+  useEffect(() => {
+    if (prevActiveQuestionId.current !== activeQuestionId) {
+      handleSaveForm();
+    }
+    prevActiveQuestionId.current = activeQuestionId;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [activeQuestionId]);
+
   const sensors = useSensors(
     useSensor(PointerSensor),
     useSensor(KeyboardSensor, {
@@ -181,8 +201,19 @@ export default function FormEditorPage() {
   };
 
   return (
-    <div className="min-h-screen bg-primary/5 p-8 pb-32">
+    <div
+      className="min-h-screen bg-primary/5 p-8 pb-32"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) {
+          setActiveQuestionId(null);
+        }
+      }}
+    >
       <div className="mx-auto max-w-3xl space-y-6">
+        <div className="min-h-[1.5rem] text-center text-xs text-muted-foreground">
+          {saveStatus}
+        </div>
+
         {/* <div className="flex justify-end">
           <Button
             onClick={handleSaveForm}
@@ -200,18 +231,21 @@ export default function FormEditorPage() {
               placeholder="Form Title"
               value={formTitle}
               onChange={(e) => setFormTitle(e.target.value)}
+              onBlur={handleSaveForm}
             />
             <Input
               className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
-              placeholder="Banner Image URL (optional)"
+              placeholder="Banner Image URL"
               value={formBanner}
               onChange={(e) => setFormBanner(e.target.value)}
+              onBlur={handleSaveForm}
             />
             <Textarea
               className="resize-none border-none px-0 text-base text-muted-foreground focus-visible:ring-0"
               placeholder="Form description"
               value={formDescription}
               onChange={(e) => setFormDescription(e.target.value)}
+              onBlur={handleSaveForm}
             />
           </div>
         </Card>
diff --git a/apps/blade/src/components/admin/forms/question-edit-card.tsx b/apps/blade/src/components/admin/forms/question-edit-card.tsx
index 5bbf986ef..ebde17b9d 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -13,7 +13,6 @@ import {
   Clock,
   Copy,
   GripHorizontal,
-  MoreVertical,
   Pilcrow,
   Trash,
   X,
@@ -184,11 +183,11 @@ export function QuestionEditCard({
             />
           </div>
 
-          <div className="ml-2">
+          {/* <div className="ml-2">
             <Button variant="ghost" size="icon">
               <MoreVertical className="h-5 w-5 text-gray-500" />
             </Button>
-          </div>
+          </div> */}
         </div>
       </div>
     </Card>
@@ -211,7 +210,7 @@ function QuestionBody({
           <Input
             placeholder="Short answer text"
             className="rounded-none border-x-0 border-b border-t-0 border-gray-300 bg-transparent px-0 shadow-none outline-none focus-visible:border-b-2 focus-visible:border-primary focus-visible:ring-0"
-            disabled={false}
+            disabled
           />
         </div>
       );
@@ -221,7 +220,7 @@ function QuestionBody({
           <Textarea
             placeholder="Long answer text"
             className="resize-none rounded-none border-x-0 border-b border-t-0 border-gray-300 bg-transparent px-0 shadow-none outline-none focus-visible:border-b-2 focus-visible:border-primary focus-visible:ring-0"
-            disabled={false}
+            disabled
           />
         </div>
       );
@@ -231,13 +230,13 @@ function QuestionBody({
       return <OptionList question={question} onUpdate={onUpdate} />;
     case "DATE":
       return (
-        <div className="flex items-center gap-2">
+        <div className="pointer-events-none flex items-center gap-2 opacity-50">
           <DatePicker />
         </div>
       );
     case "TIME":
       return (
-        <div className="flex items-center gap-2">
+        <div className="pointer-events-none flex items-center gap-2 opacity-50">
           <TimePicker />
         </div>
       );

From 80a58b8d73fdc12914f27f8eab90f3b338a3ee88 Mon Sep 17 00:00:00 2001
From: Pranavsai Gandikota <pranavsaigandikota@gmail.com>
Date: Mon, 29 Dec 2025 10:47:06 -0800
Subject: [PATCH 11/13] Clean up page.tsx by removing unused comments

Removed commented-out code for clarity.
---
 apps/blade/src/app/admin/forms/test-editor/page.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index 4eec612f3..bc4310fc7 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -125,8 +125,6 @@ export default function FormEditorPage() {
       }),
     });
   };
-
-  //Printing from page.tsx
   useEffect(() => {
     // eslint-disable-next-line no-console
     console.log("UPDATED FORM STATE (Page Level):", {

From 29b688ef5ab828c898184748bed8d3609cfbd501 Mon Sep 17 00:00:00 2001
From: Pranavsai Gandikota <pranavsaigandikota@gmail.com>
Date: Mon, 29 Dec 2025 10:52:07 -0800
Subject: [PATCH 12/13] Remove console log

Removed console log for updated form state in useEffect.
---
 apps/blade/src/app/admin/forms/test-editor/page.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index bc4310fc7..ab54b2742 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -125,15 +125,7 @@ export default function FormEditorPage() {
       }),
     });
   };
-  useEffect(() => {
-    // eslint-disable-next-line no-console
-    console.log("UPDATED FORM STATE (Page Level):", {
-      name: formTitle,
-      description: formDescription,
-      banner: formBanner,
-      questions,
-    });
-  }, [questions, formTitle, formDescription, formBanner]);
+  
 
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
 

From 3662ad224d28f49044ac489d82d3450667b1400a Mon Sep 17 00:00:00 2001
From: Pranavsai <pranavsaigandikota@gmail.com>
Date: Mon, 29 Dec 2025 14:10:40 -0800
Subject: [PATCH 13/13] Prettier Fix

---
 apps/blade/src/app/admin/forms/test-editor/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/blade/src/app/admin/forms/test-editor/page.tsx b/apps/blade/src/app/admin/forms/test-editor/page.tsx
index ab54b2742..7ff8dfe31 100644
--- a/apps/blade/src/app/admin/forms/test-editor/page.tsx
+++ b/apps/blade/src/app/admin/forms/test-editor/page.tsx
@@ -125,7 +125,6 @@ export default function FormEditorPage() {
       }),
     });
   };
-  
 
   const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);