From cf5f914afa43e4531a27acfbfc5480c62317746d Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:10:33 -0500
Subject: [PATCH 01/16] respect newlines and modify max count limits

---
 .../_components/FileUploadResponsesTable.tsx  |  4 +-
 .../_components/PerUserResponsesView.tsx      | 10 +++-
 .../_components/ResponseBarChart.tsx          |  2 +-
 .../ResponseHorizontalBarChart.tsx            |  2 +-
 .../_components/ResponsePieChart.tsx          |  2 +-
 .../responses/_components/ResponsesTable.tsx  | 10 ++--
 .../_components/question-response-card.tsx    | 59 ++++++++++++++++---
 packages/api/src/utils.ts                     | 14 +++--
 packages/consts/src/knight-hacks.ts           |  2 +-
 9 files changed, 81 insertions(+), 24 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/FileUploadResponsesTable.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/FileUploadResponsesTable.tsx
index 8158a785f..cb10f7fd6 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/FileUploadResponsesTable.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/FileUploadResponsesTable.tsx
@@ -46,7 +46,7 @@ export function FileUploadResponsesTable({
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{question}</CardTitle>
+          <CardTitle className="whitespace-pre-line">{question}</CardTitle>
         </CardHeader>
         <CardContent>
           <p className="py-8 text-center text-muted-foreground">
@@ -60,7 +60,7 @@ export function FileUploadResponsesTable({
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line">{question}</CardTitle>
         <p className="mt-1 text-sm text-muted-foreground">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
         </p>
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx
index aa7b12fa1..44890b6e6 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/PerUserResponsesView.tsx
@@ -214,7 +214,7 @@ export function PerUserResponsesView({
               return (
                 <div key={question.question}>
                   <div className="space-y-2">
-                    <h4 className="font-medium text-foreground">
+                    <h4 className="whitespace-pre-line font-medium text-foreground">
                       {question.question}
                       {!question.optional && (
                         <span className="ml-1 text-red-500">*</span>
@@ -234,7 +234,13 @@ export function PerUserResponsesView({
                         {formatResponseValue(answer)}
                       </Link>
                     ) : (
-                      <p className="break-words text-sm text-muted-foreground">
+                      <p
+                        className={`break-words text-sm text-muted-foreground ${
+                          question.type === "PARAGRAPH"
+                            ? "whitespace-pre-wrap"
+                            : ""
+                        }`}
+                      >
                         {formatResponseValue(answer)}
                       </p>
                     )}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
index 88f277b9b..70764d2aa 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
@@ -73,7 +73,7 @@ export function ResponseBarChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
index 4d939a3fe..872d2e1f8 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
@@ -88,7 +88,7 @@ export function ResponseHorizontalBarChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
index aecb61841..f3c45fedf 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
@@ -77,7 +77,7 @@ export function ResponsePieChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsesTable.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsesTable.tsx
index 49d7342ec..9f90636c6 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsesTable.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsesTable.tsx
@@ -35,7 +35,7 @@ export function ResponsesTable({ question, responses }: ResponsesTableProps) {
     return (
       <Card>
         <CardHeader>
-          <CardTitle>{question}</CardTitle>
+          <CardTitle className="whitespace-pre-line">{question}</CardTitle>
         </CardHeader>
         <CardContent>
           <p className="py-8 text-center text-muted-foreground">
@@ -49,7 +49,7 @@ export function ResponsesTable({ question, responses }: ResponsesTableProps) {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line">{question}</CardTitle>
         {/* show total response count */}
         <p className="mt-1 text-sm text-muted-foreground">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
@@ -94,8 +94,10 @@ export function ResponsesTable({ question, responses }: ResponsesTableProps) {
                       </a>
                     );
                   } catch {
-                    // Not a valid URL, just display as string
-                    displayValue = answer;
+                    // Not a valid URL, just display as string (preserve newlines)
+                    displayValue = (
+                      <span className="whitespace-pre-wrap">{answer}</span>
+                    );
                   }
                 } else if (typeof answer === "object") {
                   displayValue = JSON.stringify(answer);
diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index fbe9fc9ad..cda67ace3 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import type { z } from "zod";
+import { FileUp, Loader2, X } from "lucide-react";
+import Image from "next/image";
 import * as React from "react";
 import { useRef, useState } from "react";
-import Image from "next/image";
-import { FileUp, Loader2, X } from "lucide-react";
+import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";
@@ -22,6 +22,7 @@ import {
   SelectValue,
 } from "@forge/ui/select";
 import { Slider } from "@forge/ui/slider";
+import { Textarea } from "@forge/ui/textarea";
 import { TimePicker } from "@forge/ui/time-picker";
 import { toast } from "@forge/ui/toast";
 
@@ -55,7 +56,7 @@ export function QuestionResponseCard({
       {/* Header */}
       <div className="flex flex-col gap-4">
         <div className="flex items-start gap-2">
-          <h3 className="text-base font-medium">
+          <h3 className="whitespace-pre-line text-base font-medium">
             {question.question}
             {isRequired && <span className="ml-1 text-red-500">*</span>}
           </h3>
@@ -106,19 +107,61 @@ function QuestionBody({
   formId?: string;
 }) {
   switch (question.type) {
-    case "SHORT_ANSWER":
-    case "PARAGRAPH":
+    case "SHORT_ANSWER": {
+      const currentValue = (value as string) || "";
+      const maxLength = 150;
+      const charCount = currentValue.length;
+      const isOverLimit = charCount > maxLength;
+
       return (
-        <div className="w-full md:w-2/3">
+        <div className="w-full">
           <Input
             placeholder="Your answer"
-            value={(value as string) || ""}
+            value={currentValue}
             onChange={(e) => onChange(e.target.value)}
             disabled={disabled}
             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"
           />
+          <div className="mt-1 flex justify-end">
+            <span
+              className={`text-xs ${
+                isOverLimit ? "text-destructive" : "text-muted-foreground"
+              }`}
+            >
+              {charCount}/{maxLength}
+            </span>
+          </div>
         </div>
       );
+    }
+    case "PARAGRAPH": {
+      const currentValue = (value as string) || "";
+      const maxLength = 750;
+      const charCount = currentValue.length;
+      const isOverLimit = charCount > maxLength;
+
+      return (
+        <div className="w-full">
+          <Textarea
+            placeholder="Your answer"
+            value={currentValue}
+            onChange={(e) => onChange(e.target.value)}
+            disabled={disabled}
+            rows={3}
+            className="overflow-y-auto whitespace-pre-wrap 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"
+          />
+          <div className="mt-1 flex justify-end">
+            <span
+              className={`text-xs ${
+                isOverLimit ? "text-destructive" : "text-muted-foreground"
+              }`}
+            >
+              {charCount}/{maxLength}
+            </span>
+          </div>
+        </div>
+      );
+    }
 
     case "MULTIPLE_CHOICE":
       return (
diff --git a/packages/api/src/utils.ts b/packages/api/src/utils.ts
index 0df7b1b4f..71d336e4c 100644
--- a/packages/api/src/utils.ts
+++ b/packages/api/src/utils.ts
@@ -1,10 +1,10 @@
-import type { APIGuildMember } from "discord-api-types/v10";
-import type { JSONSchema7 } from "json-schema";
-import { cookies } from "next/headers";
 import { REST } from "@discordjs/rest";
 import { TRPCError } from "@trpc/server";
+import type { APIGuildMember } from "discord-api-types/v10";
 import { Routes } from "discord-api-types/v10";
 import { and, eq, gt, inArray } from "drizzle-orm";
+import type { JSONSchema7 } from "json-schema";
+import { cookies } from "next/headers";
 import { Resend } from "resend";
 import Stripe from "stripe";
 
@@ -358,6 +358,9 @@ function createJsonSchemaValidator({
     case "SHORT_ANSWER":
     case "PARAGRAPH":
       schema.type = "string";
+      if (max === undefined) {
+        schema.maxLength = type === "SHORT_ANSWER" ? 150 : 750;
+      }
       break;
     case "EMAIL":
       schema.type = "string";
@@ -418,7 +421,10 @@ function createJsonSchemaValidator({
   }
 
   if (max !== undefined) {
-    if (schema.type === "string") schema.maxLength = max;
+    if (schema.type === "string") {
+      // Explicit max value overrides any defaults
+      schema.maxLength = max;
+    }
     if (schema.type === "array") schema.maxItems = max;
     if (schema.type === "number") schema.maximum = max;
   }
diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index e86953868..7cf786c21 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6754,7 +6754,7 @@ export const OFFICER_ROLE_ID =
 export const DEVPOST_TEAM_MEMBER_EMAIL_OFFSET = 3;
 
 export const QuestionValidator = z.object({
-  question: z.string().max(200),
+  question: z.string(),
   image: z.string().url().optional(),
   type: z.enum([
     "SHORT_ANSWER",

From ad583d895ed39f57e180d52216fe3b30fd064726 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:30:26 -0500
Subject: [PATCH 02/16] gatekeep responder access too...

---
 .../src/app/admin/forms/[slug]/client.tsx     | 108 ++++++++++++++++--
 apps/blade/src/app/forms/[formName]/page.tsx  |  27 ++++-
 packages/api/src/routers/forms.ts             |  97 +++++++++++++++-
 packages/db/src/schemas/knight-hacks.ts       |  51 ++++++---
 4 files changed, 252 insertions(+), 31 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index 46cc489c5..fded6d8ba 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -1,11 +1,6 @@
 "use client";
 
 import type { DragEndEvent } from "@dnd-kit/core";
-import type { CSSProperties } from "react";
-import type * as z from "zod";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import {
   closestCenter,
   DndContext,
@@ -22,7 +17,12 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
-import { ArrowLeft, Loader2, Plus, Save } from "lucide-react";
+import { ArrowLeft, Loader2, Plus, Save, Users } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import type * as z from "zod";
 
 import type {
   FormType,
@@ -31,18 +31,28 @@ import type {
 } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
+import { Checkbox } from "@forge/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@forge/ui/dialog";
 import { Input } from "@forge/ui/input";
 import { Label } from "@forge/ui/label";
 import { Switch } from "@forge/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@forge/ui/tabs";
 import { Textarea } from "@forge/ui/textarea";
 
-import type { MatchingType } from "./linker";
-import type { ProcedureMeta } from "~/lib/utils";
 import { InstructionEditCard } from "~/components/admin/forms/instruction-edit-card";
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
+import type { ProcedureMeta } from "~/lib/utils";
 import { api } from "~/trpc/react";
 import { ConnectionViewer } from "./con-viewer";
+import type { MatchingType } from "./linker";
 import ListMatcher from "./linker";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;
@@ -162,6 +172,8 @@ export function EditorClient({
   const [instructions, setInstructions] = useState<UIInstruction[]>([]);
   const [duesOnly, setDuesOnly] = useState(false);
   const [allowResubmission, setAllowResubmission] = useState(true);
+  const [responseRoleIds, setResponseRoleIds] = useState<string[]>([]);
+  const [responseRolesDialogOpen, setResponseRolesDialogOpen] = useState(false);
   const [activeItemId, setActiveItemId] = useState<string | null>(null);
 
   const [isLoading, setIsLoading] = useState(true);
@@ -177,6 +189,8 @@ export function EditorClient({
     { retry: false, refetchOnWindowFocus: false },
   );
 
+  const { data: allRoles = [] } = api.roles.getAllLinks.useQuery();
+
   const updateFormMutation = api.forms.updateForm.useMutation({
     onMutate: () => setSaveStatus("Saving..."),
     onSuccess: () =>
@@ -227,6 +241,7 @@ export function EditorClient({
       },
       duesOnly,
       allowResubmission,
+      responseRoleIds,
     } as any);
   }, [
     formTitle,
@@ -265,6 +280,7 @@ export function EditorClient({
         setFormBanner(formData.formData.banner || "");
         setDuesOnly(formData.duesOnly);
         setAllowResubmission(formData.allowResubmission);
+        setResponseRoleIds((formData as any).responseRoleIds || []);
 
         const loadedQuestions: UIQuestion[] = formData.formData.questions.map(
           (q: FormQuestion & { order?: number }) => ({
@@ -292,7 +308,7 @@ export function EditorClient({
   // auto save trigger when toggle switches are changed
   useEffect(() => {
     if (!isLoading) handleSaveForm();
-  }, [duesOnly, allowResubmission, isLoading]); // removed handleSaveForm to prevent save-on-every-render
+  }, [duesOnly, allowResubmission, responseRoleIds, isLoading]); // removed handleSaveForm to prevent save-on-every-render
 
   // auto save when finishing editing an item (changing active card)
   useEffect(() => {
@@ -494,6 +510,80 @@ export function EditorClient({
                 Allow Multiple Responses
               </Label>
             </div>
+            <Dialog
+              open={responseRolesDialogOpen}
+              onOpenChange={setResponseRolesDialogOpen}
+            >
+              <DialogTrigger asChild>
+                <Button variant="outline" size="sm" className="gap-2">
+                  <Users className="h-4 w-4" />
+                  Response Roles
+                  {responseRoleIds.length > 0 && (
+                    <span className="ml-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground">
+                      {responseRoleIds.length}
+                    </span>
+                  )}
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Configure Response Roles</DialogTitle>
+                  <DialogDescription>
+                    Select which roles can respond to this form. If no roles are
+                    selected, anyone can respond.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="max-h-[400px] overflow-y-auto py-4">
+                  <div className="space-y-3">
+                    {allRoles.map((role) => {
+                      const isSelected = responseRoleIds.includes(role.id);
+                      return (
+                        <div
+                          key={role.id}
+                          className="flex items-center gap-3 rounded-md border p-3 hover:bg-muted/50"
+                        >
+                          <Checkbox
+                            id={`role-${role.id}`}
+                            checked={isSelected}
+                            onCheckedChange={(checked) => {
+                              if (checked) {
+                                setResponseRoleIds([...responseRoleIds, role.id]);
+                              } else {
+                                setResponseRoleIds(
+                                  responseRoleIds.filter((id) => id !== role.id),
+                                );
+                              }
+                            }}
+                          />
+                          <Label
+                            htmlFor={`role-${role.id}`}
+                            className="flex-1 cursor-pointer text-sm font-normal"
+                          >
+                            {role.name}
+                          </Label>
+                        </div>
+                      );
+                    })}
+                    {allRoles.length === 0 && (
+                      <p className="text-sm text-muted-foreground">
+                        No roles available. Create roles first.
+                      </p>
+                    )}
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    variant="outline"
+                    onClick={() => setResponseRoleIds([])}
+                  >
+                    Clear All
+                  </Button>
+                  <Button onClick={() => setResponseRolesDialogOpen(false)}>
+                    Done
+                  </Button>
+                </DialogFooter>
+              </DialogContent>
+            </Dialog>
           </div>
         </div>
 
diff --git a/apps/blade/src/app/forms/[formName]/page.tsx b/apps/blade/src/app/forms/[formName]/page.tsx
index 8c227d50d..8a870e2fc 100644
--- a/apps/blade/src/app/forms/[formName]/page.tsx
+++ b/apps/blade/src/app/forms/[formName]/page.tsx
@@ -5,6 +5,8 @@ import { appRouter } from "@forge/api";
 import { log } from "@forge/api/utils";
 import { auth } from "@forge/auth";
 
+import { Card } from "@forge/ui/card";
+import { XCircle } from "lucide-react";
 import { SIGN_IN_PATH } from "~/consts";
 import { extractProcedures } from "~/lib/utils";
 import { api, HydrateClient } from "~/trpc/server";
@@ -21,7 +23,14 @@ export default async function FormResponderPage({
   }
 
   if (!params.formName) {
-    return <div>Form not found</div>;
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-primary/5 p-6">
+      <Card className="max-w-md p-8 text-center">
+        <XCircle className="mx-auto mb-4 h-16 w-16 text-destructive" />
+        <h1 className="mb-2 text-2xl font-bold">Form not found</h1>
+      </Card>
+      </div>
+    );
   }
 
   // handle url encode form names to allow spacing and special characters
@@ -39,6 +48,22 @@ export default async function FormResponderPage({
   }
 
   const form = await api.forms.getForm({ slug_name: formName });
+
+  const { canRespond } = await api.forms.checkResponseAccess({
+    formId: form.id,
+  });
+
+  if (!canRespond) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-primary/5 p-6">
+        <Card className="max-w-md p-8 text-center">
+          <XCircle className="mx-auto mb-4 h-16 w-16 text-destructive" />
+          <h1 className="mb-2 text-2xl font-bold">You do not have permission to respond to this form</h1>
+        </Card>
+      </div>
+    );
+  }
+
   const connections = await api.forms.getConnections({ id: form.id });
   const procs = extractProcedures(appRouter);
 
diff --git a/packages/api/src/routers/forms.ts b/packages/api/src/routers/forms.ts
index a2c413369..019216ecb 100644
--- a/packages/api/src/routers/forms.ts
+++ b/packages/api/src/routers/forms.ts
@@ -1,6 +1,6 @@
-import type { JSONSchema7 } from "json-schema";
 import { TRPCError } from "@trpc/server";
 import { and, count, desc, eq, inArray, lt, sql } from "drizzle-orm";
+import type { JSONSchema7 } from "json-schema";
 import jsonSchemaToZod from "json-schema-to-zod";
 import * as z from "zod";
 
@@ -15,6 +15,7 @@ import { db } from "@forge/db/client";
 import { Permissions, Roles } from "@forge/db/schemas/auth";
 import {
   FormResponse,
+  FormResponseRoles,
   FormSchemaSchema,
   FormSectionRoles,
   FormSections,
@@ -102,7 +103,9 @@ export const formsRouter = {
         createdAt: true,
         formData: true,
         formValidatorJson: true,
-      }).extend({ formData: FormSchemaValidator }),
+      })
+        .extend({ formData: FormSchemaValidator })
+        .extend({ responseRoleIds: z.array(z.string().uuid()).optional() }),
     )
     .mutation(async ({ input, ctx }) => {
       controlPerms.or(["EDIT_FORMS"], ctx);
@@ -122,6 +125,15 @@ export const formsRouter = {
         where: (t, { eq }) => eq(t.id, input.id ?? ""),
       });
 
+      if (!existingForm) {
+        throw new TRPCError({
+          message: "Form not found",
+          code: "NOT_FOUND",
+        });
+      }
+
+      const formId = existingForm.id;
+
       await db
         .insert(FormsSchemas)
         .values({
@@ -129,7 +141,7 @@ export const formsRouter = {
           name: input.formData.name,
           slugName: slug_name,
           formValidatorJson: jsonSchema.schema,
-          sectionId: existingForm?.sectionId ?? null,
+          sectionId: existingForm.sectionId,
         })
         .onConflictDoUpdate({
           //If it already exists upsert it
@@ -139,9 +151,25 @@ export const formsRouter = {
             name: input.formData.name,
             slugName: slug_name,
             formValidatorJson: jsonSchema.schema,
-            sectionId: existingForm?.sectionId ?? null,
+            sectionId: existingForm.sectionId,
           },
         });
+
+      const { responseRoleIds } = input;
+      if (responseRoleIds !== undefined) {
+        await db
+          .delete(FormResponseRoles)
+          .where(eq(FormResponseRoles.formId, formId));
+
+        if (responseRoleIds.length > 0) {
+          await db.insert(FormResponseRoles).values(
+            responseRoleIds.map((roleId) => ({
+              formId,
+              roleId,
+            })),
+          );
+        }
+      }
     }),
 
   getForm: protectedProcedure
@@ -161,6 +189,11 @@ export const formsRouter = {
       const { formValidatorJson: _JSONValidator, ...retForm } = form;
       const formData = form.formData as FormType;
 
+      const responseRoles = await db
+        .select({ roleId: FormResponseRoles.roleId })
+        .from(FormResponseRoles)
+        .where(eq(FormResponseRoles.formId, form.id));
+
       // Regenerate presigned URLs for any media that has objectNames
       const instructionsWithFreshUrls = await regenerateMediaUrls(
         formData.instructions,
@@ -168,6 +201,7 @@ export const formsRouter = {
 
       return {
         ...retForm,
+        responseRoleIds: responseRoles.map((r) => r.roleId),
         formData: {
           ...formData,
           instructions: instructionsWithFreshUrls,
@@ -176,6 +210,35 @@ export const formsRouter = {
       };
     }),
 
+  checkResponseAccess: protectedProcedure
+    .input(z.object({ formId: z.string() }))
+    .query(async ({ input, ctx }) => {
+      const userId = ctx.session.user.id;
+
+      const responseRoles = await db
+        .select({ roleId: FormResponseRoles.roleId })
+        .from(FormResponseRoles)
+        .where(eq(FormResponseRoles.formId, input.formId));
+
+      if (responseRoles.length === 0) {
+        return { canRespond: true };
+      }
+
+      const userRoleIds = await db
+        .select({ roleId: Permissions.roleId })
+        .from(Permissions)
+        .where(sql`cast(${Permissions.userId} as text) = ${userId}`);
+
+      const userRoleIdSet = new Set(userRoleIds.map((r) => r.roleId));
+      const formRoleIdSet = new Set(responseRoles.map((r) => r.roleId));
+
+      const hasRequiredRole = Array.from(formRoleIdSet).some((roleId) =>
+        userRoleIdSet.has(roleId),
+      );
+
+      return { canRespond: hasRequiredRole };
+    }),
+
   deleteForm: permProcedure
     .input(z.object({ slug_name: z.string() }))
     .mutation(async ({ input, ctx }) => {
@@ -322,6 +385,32 @@ export const formsRouter = {
         });
       }
 
+      const responseRoles = await db
+        .select({ roleId: FormResponseRoles.roleId })
+        .from(FormResponseRoles)
+        .where(eq(FormResponseRoles.formId, input.form));
+
+      if (responseRoles.length > 0) {
+        const userRoleIds = await db
+          .select({ roleId: Permissions.roleId })
+          .from(Permissions)
+          .where(sql`cast(${Permissions.userId} as text) = ${userId}`);
+
+        const userRoleIdSet = new Set(userRoleIds.map((r) => r.roleId));
+        const formRoleIdSet = new Set(responseRoles.map((r) => r.roleId));
+
+        const hasRequiredRole = Array.from(formRoleIdSet).some((roleId) =>
+          userRoleIdSet.has(roleId),
+        );
+
+        if (!hasRequiredRole) {
+          throw new TRPCError({
+            message: "You don't have permission to respond to this form",
+            code: "FORBIDDEN",
+          });
+        }
+      }
+
       // check if user already submitted and form doesnt allow resubmission
       if (!form.allowResubmission) {
         const existing = await db.query.FormResponse.findFirst({
diff --git a/packages/db/src/schemas/knight-hacks.ts b/packages/db/src/schemas/knight-hacks.ts
index f10cf6fc6..8515ae619 100644
--- a/packages/db/src/schemas/knight-hacks.ts
+++ b/packages/db/src/schemas/knight-hacks.ts
@@ -1,27 +1,27 @@
 import { relations } from "drizzle-orm";
 import {
-  pgEnum,
-  pgTableCreator,
-  primaryKey,
-  unique,
+    pgEnum,
+    pgTableCreator,
+    primaryKey,
+    unique,
 } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import z from "zod";
 
 import {
-  COUNTRIES,
-  DEFAULT_EMAIL_QUEUE_CRON_SCHEDULE,
-  EVENT_FEEDBACK_HEARD,
-  EVENT_FEEDBACK_SIMILAR_EVENT,
-  EVENT_TAGS,
-  GENDERS,
-  HACKATHON_APPLICATION_STATES,
-  LEVELS_OF_STUDY,
-  MAJORS,
-  RACES_OR_ETHNICITIES,
-  SCHOOLS,
-  SHIRT_SIZES,
-  SPONSOR_TIERS,
+    COUNTRIES,
+    DEFAULT_EMAIL_QUEUE_CRON_SCHEDULE,
+    EVENT_FEEDBACK_HEARD,
+    EVENT_FEEDBACK_SIMILAR_EVENT,
+    EVENT_TAGS,
+    GENDERS,
+    HACKATHON_APPLICATION_STATES,
+    LEVELS_OF_STUDY,
+    MAJORS,
+    RACES_OR_ETHNICITIES,
+    SCHOOLS,
+    SHIRT_SIZES,
+    SPONSOR_TIERS,
 } from "@forge/consts/knight-hacks";
 
 import { Roles, User } from "./auth";
@@ -580,6 +580,23 @@ export const FormsSchemas = createTable("form_schemas", (t) => ({
 //Ts so dumb
 export const FormSchemaSchema = createInsertSchema(FormsSchemas);
 
+export const FormResponseRoles = createTable(
+  "form_response_roles",
+  (t) => ({
+    formId: t
+      .uuid()
+      .notNull()
+      .references(() => FormsSchemas.id, { onDelete: "cascade" }),
+    roleId: t
+      .uuid()
+      .notNull()
+      .references(() => Roles.id, { onDelete: "cascade" }),
+  }),
+  (t) => ({
+    pk: primaryKey({ columns: [t.formId, t.roleId] }),
+  }),
+);
+
 export const FormResponse = createTable("form_response", (t) => ({
   id: t.uuid().notNull().primaryKey().defaultRandom(),
   form: t

From 5ebd1b6530d2a15b024ae0832957385abe81b220 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:36:12 -0500
Subject: [PATCH 03/16] fix yes/no response oddity

---
 .../responses/_components/AllResponsesView.tsx   | 10 +++++-----
 .../responses/_components/ResponsePieChart.tsx   | 16 +++++++++++++---
 .../_components/question-response-card.tsx       |  3 ---
 3 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/AllResponsesView.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/AllResponsesView.tsx
index acb8734e0..3573fd114 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/AllResponsesView.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/AllResponsesView.tsx
@@ -31,10 +31,11 @@ export function AllResponsesView({
       {/* max-w-4xl mx-auto centers the charts and limits width */}
       <div className="mx-auto max-w-4xl space-y-2 md:space-y-6">
         {formData.questions.map((question) => {
-          // render pie chart for MULTIPLE_CHOICE or DROPDOWN questions
+          // render pie chart for MULTIPLE_CHOICE, DROPDOWN, or BOOLEAN questions
           if (
             question.type === "MULTIPLE_CHOICE" ||
-            question.type === "DROPDOWN"
+            question.type === "DROPDOWN" ||
+            question.type === "BOOLEAN"
           ) {
             return (
               <ResponsePieChart
@@ -71,17 +72,16 @@ export function AllResponsesView({
         })}
       </div>
 
-      {/* text responses section - for SHORT_ANSWER, PARAGRAPH, EMAIL, PHONE, BOOLEAN, and LINK questions */}
+      {/* text responses section - for SHORT_ANSWER, PARAGRAPH, EMAIL, PHONE, and LINK questions */}
       {/* renders a separate table for each text-based question */}
       <div className="mx-auto mt-3 max-w-4xl space-y-2 md:mt-8 md:space-y-6">
         {formData.questions.map((question) => {
-          // render table for SHORT_ANSWER, PARAGRAPH, EMAIL, PHONE, BOOLEAN, or LINK questions
+          // render table for SHORT_ANSWER, PARAGRAPH, EMAIL, PHONE, or LINK questions
           if (
             question.type === "SHORT_ANSWER" ||
             question.type === "PARAGRAPH" ||
             question.type === "EMAIL" ||
             question.type === "PHONE" ||
-            question.type === "BOOLEAN" ||
             question.type === "LINK"
           ) {
             return (
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
index f3c45fedf..aa6b4b017 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
@@ -34,12 +34,22 @@ export function ResponsePieChart({
     if (answer !== undefined && answer !== null) {
       // increment count for this answer
       let answerStr: string;
-      if (typeof answer === "string") {
-        answerStr = answer;
+      if (typeof answer === "boolean") {
+        // convert boolean to "Yes" or "No" for display
+        answerStr = answer ? "Yes" : "No";
+      } else if (typeof answer === "string") {
+        // convert "true"/"false" strings to "Yes"/"No" for boolean questions
+        if (answer === "true") {
+          answerStr = "Yes";
+        } else if (answer === "false") {
+          answerStr = "No";
+        } else {
+          answerStr = answer;
+        }
       } else if (typeof answer === "object") {
         answerStr = JSON.stringify(answer);
       } else {
-        // for primitive types (number, boolean, etc.) - safe to stringify
+        // for primitive types (number, etc.) - safe to stringify
         // eslint-disable-next-line @typescript-eslint/no-base-to-string
         answerStr = String(answer);
       }
diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index cda67ace3..73899ec61 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -525,9 +525,6 @@ function BooleanInput({
         }}
         disabled={disabled}
       />
-      <Label className="cursor-pointer font-normal">
-        {value ? "Yes" : "No"}
-      </Label>
     </div>
   );
 }

From 029bb2af5d7a40084373cc93824c7e01a291b1ed Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:43:00 -0500
Subject: [PATCH 04/16] allow an "other" field for checkbox or mc

---
 .../_components/question-response-card.tsx    | 235 ++++++++++++++++--
 .../admin/forms/question-edit-card.tsx        |  23 ++
 packages/consts/src/knight-hacks.ts           |   1 +
 3 files changed, 242 insertions(+), 17 deletions(-)

diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index 73899ec61..a33a64caa 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -14,6 +14,7 @@ import { DatePicker } from "@forge/ui/date-picker";
 import { Input } from "@forge/ui/input";
 import { Label } from "@forge/ui/label";
 import { RadioGroup, RadioGroupItem } from "@forge/ui/radio-group";
+import { ResponsiveComboBox } from "@forge/ui/responsive-combo-box";
 import {
   Select,
   SelectContent,
@@ -351,26 +352,109 @@ function MultipleChoiceInput({
 }) {
   const options = question.options || [];
   const questionKey = question.question.replace(/\s+/g, "-").toLowerCase();
+  const [otherText, setOtherText] = useState<string>("");
+  const OTHER_VALUE = "__OTHER__";
+  const allowOther = Boolean(question.allowOther);
+
+  // Check if current value is an "Other" option (not in the predefined options)
+  const isOtherSelected =
+    value &&
+    typeof value === "string" &&
+    !options.includes(value) &&
+    value !== OTHER_VALUE;
+
+  // Extract other text from value if it's a custom value
+  React.useEffect(() => {
+    if (isOtherSelected && typeof value === "string") {
+      setOtherText(value);
+    }
+  }, [value, isOtherSelected]);
+
+  // Helper function to capitalize first letter of each word
+  const capitalizeWords = (text: string): string => {
+    return text
+      .split(" ")
+      .map((word) => {
+        if (word.length === 0) return word;
+        return word[0]?.toUpperCase() + word.slice(1).toLowerCase();
+      })
+      .join(" ");
+  };
+
+  const handleOtherTextChange = (text: string) => {
+    const capitalized = capitalizeWords(text);
+    setOtherText(capitalized);
+    onChange(capitalized || null);
+  };
+
+  const handleRadioChange = (newValue: string) => {
+    if (newValue === OTHER_VALUE) {
+      // When "Other" is selected, don't clear the text, just mark as other
+      onChange(otherText || OTHER_VALUE);
+    } else {
+      onChange(newValue || null);
+    }
+  };
 
   return (
-    <RadioGroup
-      value={value || ""}
-      onValueChange={(newValue) => onChange(newValue || null)}
-      className="flex flex-col gap-3"
-      disabled={disabled}
-    >
-      {options.map((option, idx) => (
-        <div key={idx} className="flex items-center gap-3">
-          <RadioGroupItem value={option} id={`${questionKey}-${idx}`} />
-          <Label
-            htmlFor={`${questionKey}-${idx}`}
-            className="cursor-pointer font-normal"
-          >
-            {option}
-          </Label>
+    <div className="flex flex-col gap-3">
+      <RadioGroup
+        value={
+          isOtherSelected
+            ? OTHER_VALUE
+            : typeof value === "string"
+              ? value
+              : ""
+        }
+        onValueChange={handleRadioChange}
+        className="flex flex-col gap-3"
+        disabled={disabled}
+      >
+        {options.map((option, idx) => (
+          <div key={idx} className="flex items-center gap-3">
+            <RadioGroupItem value={option} id={`${questionKey}-${idx}`} />
+            <Label
+              htmlFor={`${questionKey}-${idx}`}
+              className="cursor-pointer font-normal"
+            >
+              {option}
+            </Label>
+          </div>
+        ))}
+        {allowOther && (
+          <div className="flex items-center gap-3">
+            <RadioGroupItem
+              value={OTHER_VALUE}
+              id={`${questionKey}-other`}
+            />
+            <Label
+              htmlFor={`${questionKey}-other`}
+              className="cursor-pointer font-normal"
+            >
+              Other:
+            </Label>
+          </div>
+        )}
+      </RadioGroup>
+      {allowOther &&
+        (isOtherSelected ||
+          (typeof value === "string" && value === OTHER_VALUE)) && (
+        <div className="ml-7 w-full md:w-2/3">
+          <Input
+            placeholder="Please specify"
+            value={otherText}
+            onChange={(e) => handleOtherTextChange(e.target.value)}
+            onBlur={(e) => {
+              const capitalized = capitalizeWords(e.target.value);
+              setOtherText(capitalized);
+              onChange(capitalized || null);
+            }}
+            disabled={disabled}
+            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"
+          />
         </div>
-      ))}
-    </RadioGroup>
+      )}
+    </div>
   );
 }
 
@@ -388,6 +472,32 @@ function CheckboxesInput({
   const options = question.options || [];
   const selectedValues = value || [];
   const questionKey = question.question.replace(/\s+/g, "-").toLowerCase();
+  const [otherText, setOtherText] = useState<string>("");
+  const OTHER_VALUE = "__OTHER__";
+  const allowOther = Boolean(question.allowOther);
+
+  // Get all "Other" values (values not in predefined options)
+  const otherValues = selectedValues.filter(
+    (v) => !options.includes(v) && v !== OTHER_VALUE,
+  );
+
+  // If there's an other value, use it as the otherText
+  React.useEffect(() => {
+    if (otherValues.length > 0) {
+      setOtherText(otherValues[0] ?? "");
+    }
+  }, [otherValues]);
+
+  // Helper function to capitalize first letter of each word
+  const capitalizeWords = (text: string): string => {
+    return text
+      .split(" ")
+      .map((word) => {
+        if (word.length === 0) return word;
+        return word[0]?.toUpperCase() + word.slice(1).toLowerCase();
+      })
+      .join(" ");
+  };
 
   const handleCheckboxChange = (option: string, checked: boolean) => {
     if (checked) {
@@ -397,6 +507,47 @@ function CheckboxesInput({
     }
   };
 
+  const isOtherChecked =
+    selectedValues.includes(OTHER_VALUE) || otherValues.length > 0;
+
+  const handleOtherCheckboxChange = (checked: boolean) => {
+    if (checked) {
+      // Add OTHER_VALUE marker and current otherText if it exists
+      const newValues = [...selectedValues.filter((v) => v !== OTHER_VALUE)];
+      if (otherText) {
+        newValues.push(otherText);
+      } else {
+        newValues.push(OTHER_VALUE);
+      }
+      onChange(newValues);
+    } else {
+      // Remove OTHER_VALUE and all other values
+      onChange(
+        selectedValues.filter(
+          (v) => v !== OTHER_VALUE && !otherValues.includes(v),
+        ),
+      );
+      setOtherText("");
+    }
+  };
+
+  const handleOtherTextChange = (text: string) => {
+    const capitalized = capitalizeWords(text);
+    setOtherText(capitalized);
+
+    // Update the selected values: remove old other values and add new one
+    const valuesWithoutOther = selectedValues.filter(
+      (v) => !otherValues.includes(v) && v !== OTHER_VALUE,
+    );
+    if (capitalized) {
+      onChange([...valuesWithoutOther, capitalized]);
+    } else {
+      onChange(
+        isOtherChecked ? [...valuesWithoutOther, OTHER_VALUE] : valuesWithoutOther,
+      );
+    }
+  };
+
   return (
     <div className="flex flex-col gap-3">
       {options.map((option, idx) => (
@@ -417,6 +568,38 @@ function CheckboxesInput({
           </Label>
         </div>
       ))}
+      {allowOther && (
+        <div className="flex items-center gap-3">
+          <Checkbox
+            id={`${questionKey}-other`}
+            checked={isOtherChecked}
+            onCheckedChange={(checked) => handleOtherCheckboxChange(checked === true)}
+            disabled={disabled}
+          />
+          <Label
+            htmlFor={`${questionKey}-other`}
+            className="cursor-pointer font-normal"
+          >
+            Other:
+          </Label>
+        </div>
+      )}
+      {allowOther && isOtherChecked && (
+        <div className="ml-7 w-full md:w-2/3">
+          <Input
+            placeholder="Please specify"
+            value={otherText}
+            onChange={(e) => handleOtherTextChange(e.target.value)}
+            onBlur={(e) => {
+              const capitalized = capitalizeWords(e.target.value);
+              setOtherText(capitalized);
+              handleOtherTextChange(capitalized);
+            }}
+            disabled={disabled}
+            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"
+          />
+        </div>
+      )}
     </div>
   );
 }
@@ -434,6 +617,24 @@ function DropdownInput({
 }) {
   const options = question.options || [];
 
+  // Use ResponsiveComboBox for dropdowns with more than 15 options
+  if (options.length > 15) {
+    return (
+      <div className="w-full md:w-1/2">
+        <ResponsiveComboBox
+          items={options}
+          renderItem={(option) => <div>{option}</div>}
+          getItemValue={(option) => option}
+          getItemLabel={(option) => option}
+          onItemSelect={(option) => onChange(option || null)}
+          buttonPlaceholder="Select an option"
+          inputPlaceholder="Search options..."
+          isDisabled={disabled}
+        />
+      </div>
+    );
+  }
+
   return (
     <Select
       value={value || ""}
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 b594554b4..48f909499 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -423,6 +423,12 @@ function OptionList({
         ? CheckSquare
         : Circle;
 
+  const handleAllowOtherChange = (checked: boolean) => {
+    onUpdate({ ...question, allowOther: checked });
+  };
+
+  const allowOther = question.allowOther ?? false;
+
   return (
     <div className="flex flex-col gap-2">
       {options.map((optionValue, idx) => (
@@ -482,6 +488,23 @@ function OptionList({
           </Button>
         </div>
       </div>
+
+      {/* Allow Other Option Toggle - Only for MULTIPLE_CHOICE and CHECKBOXES */}
+      {(question.type === "MULTIPLE_CHOICE" || question.type === "CHECKBOXES") && (
+        <div className="mt-3 flex items-center gap-2 border-t pt-3">
+          <Checkbox
+            checked={allowOther}
+            onCheckedChange={handleAllowOtherChange}
+            id={`${question.id}-allowOther`}
+          />
+          <Label
+            htmlFor={`${question.id}-allowOther`}
+            className="cursor-pointer text-sm font-normal"
+          >
+            Allow "Other" option with custom text input
+          </Label>
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index 7cf786c21..344ac4daf 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6774,6 +6774,7 @@ export const QuestionValidator = z.object({
   ]),
   options: z.array(z.string()).optional(),
   optional: z.boolean().optional(),
+  allowOther: z.boolean().optional(),
   min: z.number().optional(),
   max: z.number().optional(),
   order: z.number().optional(),

From ada7f5633cbe4c56c6c1897c8adc6b6f739ad156 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:50:02 -0500
Subject: [PATCH 05/16] const question defaults

---
 .../_components/question-response-card.tsx    | 19 +++--
 .../admin/forms/question-edit-card.tsx        | 78 +++++++++++++++++--
 packages/consts/src/knight-hacks.ts           | 51 ++++++++++++
 3 files changed, 137 insertions(+), 11 deletions(-)

diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index a33a64caa..81e9f6a86 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -7,6 +7,7 @@ import { useRef, useState } from "react";
 import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
+import { getDropdownOptionsFromConst } from "@forge/consts/knight-hacks";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
 import { Checkbox } from "@forge/ui/checkbox";
@@ -350,27 +351,27 @@ function MultipleChoiceInput({
   onChange: (value: string | string[] | number | Date | null) => void;
   disabled: boolean;
 }) {
-  const options = question.options || [];
+  // If optionsConst is set, load options from constants instead of question.options
+  const options = question.optionsConst
+    ? getDropdownOptionsFromConst(question.optionsConst)
+    : question.options || [];
   const questionKey = question.question.replace(/\s+/g, "-").toLowerCase();
   const [otherText, setOtherText] = useState<string>("");
   const OTHER_VALUE = "__OTHER__";
   const allowOther = Boolean(question.allowOther);
 
-  // Check if current value is an "Other" option (not in the predefined options)
   const isOtherSelected =
     value &&
     typeof value === "string" &&
     !options.includes(value) &&
     value !== OTHER_VALUE;
 
-  // Extract other text from value if it's a custom value
   React.useEffect(() => {
     if (isOtherSelected && typeof value === "string") {
       setOtherText(value);
     }
   }, [value, isOtherSelected]);
 
-  // Helper function to capitalize first letter of each word
   const capitalizeWords = (text: string): string => {
     return text
       .split(" ")
@@ -469,7 +470,10 @@ function CheckboxesInput({
   onChange: (value: string | string[] | number | Date | null) => void;
   disabled?: boolean;
 }) {
-  const options = question.options || [];
+  // If optionsConst is set, load options from constants instead of question.options
+  const options = question.optionsConst
+    ? getDropdownOptionsFromConst(question.optionsConst)
+    : question.options || [];
   const selectedValues = value || [];
   const questionKey = question.question.replace(/\s+/g, "-").toLowerCase();
   const [otherText, setOtherText] = useState<string>("");
@@ -615,7 +619,10 @@ function DropdownInput({
   onChange: (value: string | string[] | number | Date | null) => void;
   disabled: boolean;
 }) {
-  const options = question.options || [];
+  // If optionsConst is set, load options from constants instead of question.options
+  const options = question.optionsConst
+    ? getDropdownOptionsFromConst(question.optionsConst)
+    : question.options || [];
 
   // Use ResponsiveComboBox for dropdowns with more than 15 options
   if (options.length > 15) {
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 48f909499..e20e1f9cd 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -1,8 +1,6 @@
 "use client";
 
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
-import type { z } from "zod";
-import * as React from "react";
 import {
   AlignLeft,
   AtSign,
@@ -24,9 +22,15 @@ import {
   Trash,
   X,
 } from "lucide-react";
+import * as React from "react";
+import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
-import { FORM_QUESTION_TYPES } from "@forge/consts/knight-hacks";
+import {
+  AVAILABLE_DROPDOWN_CONSTANTS,
+  FORM_QUESTION_TYPES,
+  getDropdownOptionsFromConst,
+} from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";
 import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
@@ -428,10 +432,72 @@ function OptionList({
   };
 
   const allowOther = question.allowOther ?? false;
+  const optionsConst = question.optionsConst;
+  const isUsingConst = Boolean(optionsConst);
+
+  const handleConstChange = (constName: string | null) => {
+    if (constName) {
+      onUpdate({ ...question, optionsConst: constName, options: [] });
+    } else {
+      onUpdate({ ...question, optionsConst: undefined });
+    }
+  };
+
+  const showConstSelector =
+    question.type === "DROPDOWN" ||
+    question.type === "MULTIPLE_CHOICE" ||
+    question.type === "CHECKBOXES";
+
+  const isRestrictedType =
+    question.type === "MULTIPLE_CHOICE" || question.type === "CHECKBOXES";
+
+  const availableConstants = Object.entries(AVAILABLE_DROPDOWN_CONSTANTS).map(
+    ([key, label]) => {
+      const constOptions = getDropdownOptionsFromConst(key);
+      const isDisabled =
+        isRestrictedType && constOptions.length >= 15;
+      return { key, label, isDisabled, length: constOptions.length };
+    },
+  );
 
   return (
     <div className="flex flex-col gap-2">
-      {options.map((optionValue, idx) => (
+      {showConstSelector && (
+        <div className="mb-3 flex flex-col gap-2 border-b pb-3">
+          <Label className="text-sm font-medium">Use Preset Options</Label>
+          <Select
+            value={optionsConst || "__MANUAL__"}
+            onValueChange={(value) =>
+              handleConstChange(value === "__MANUAL__" ? null : value)
+            }
+          >
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Select a constant (optional)" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="__MANUAL__">Manual options</SelectItem>
+              {availableConstants.map(({ key, label, isDisabled }) => (
+                <SelectItem
+                  key={key}
+                  value={key}
+                  disabled={isDisabled}
+                  className={isDisabled ? "opacity-50 cursor-not-allowed" : ""}
+                >
+                  {label}
+                  {isDisabled && " (too long for this question type, max 15 options) Use Dropdown instead"}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {isUsingConst && (
+            <p className="text-xs text-muted-foreground">
+              Using constant: {AVAILABLE_DROPDOWN_CONSTANTS[optionsConst as keyof typeof AVAILABLE_DROPDOWN_CONSTANTS]}
+            </p>
+          )}
+        </div>
+      )}
+
+      {!isUsingConst && 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>
@@ -470,7 +536,8 @@ function OptionList({
         </div>
       ))}
 
-      {/* Add Option Button */}
+      {/* Add Option Button - Only show when not using a constant */}
+      {!isUsingConst && (
       <div className="mt-1 flex items-center gap-2">
         {question.type === "DROPDOWN" ? (
           <span className="w-6 text-center text-sm">{options.length + 1}.</span>
@@ -488,6 +555,7 @@ function OptionList({
           </Button>
         </div>
       </div>
+      )}
 
       {/* Allow Other Option Toggle - Only for MULTIPLE_CHOICE and CHECKBOXES */}
       {(question.type === "MULTIPLE_CHOICE" || question.type === "CHECKBOXES") && (
diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index 344ac4daf..e412debd7 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6773,6 +6773,7 @@ export const QuestionValidator = z.object({
     "LINK",
   ]),
   options: z.array(z.string()).optional(),
+  optionsConst: z.string().optional(),
   optional: z.boolean().optional(),
   allowOther: z.boolean().optional(),
   min: z.number().optional(),
@@ -6806,6 +6807,56 @@ export type ValidatorOptions = Omit<QuestionValidatorType, "question">;
 
 export type QuestionsType = z.infer<typeof QuestionValidator>["type"];
 
+export const AVAILABLE_DROPDOWN_CONSTANTS = {
+  LEVELS_OF_STUDY: "Levels of Study",
+  ALLERGIES: "Allergies",
+  MAJORS: "Majors",
+  GENDERS: "Genders",
+  RACES_OR_ETHNICITIES: "Races or Ethnicities",
+  COUNTRIES: "Countries",
+  SCHOOLS: "Schools",
+  COMPANIES: "Companies",
+  SHIRT_SIZES: "Shirt Sizes",
+  EVENT_FEEDBACK_HEARD: "Event Feedback - How You Heard",
+  SHORT_LEVELS_OF_STUDY: "Short Levels of Study",
+  SHORT_RACES_AND_ETHNICITIES: "Short Races and Ethnicities",
+} as const;
+
+export type DropdownConstantKey = keyof typeof AVAILABLE_DROPDOWN_CONSTANTS;
+
+export function getDropdownOptionsFromConst(
+  constName: string,
+): readonly string[] {
+  switch (constName) {
+    case "LEVELS_OF_STUDY":
+      return LEVELS_OF_STUDY;
+    case "ALLERGIES":
+      return ALLERGIES;
+    case "MAJORS":
+      return MAJORS;
+    case "GENDERS":
+      return GENDERS;
+    case "RACES_OR_ETHNICITIES":
+      return RACES_OR_ETHNICITIES;
+    case "COUNTRIES":
+      return COUNTRIES;
+    case "SCHOOLS":
+      return SCHOOLS;
+    case "COMPANIES":
+      return COMPANIES;
+    case "SHIRT_SIZES":
+      return SHIRT_SIZES;
+    case "EVENT_FEEDBACK_HEARD":
+      return EVENT_FEEDBACK_HEARD;
+    case "SHORT_LEVELS_OF_STUDY":
+      return SHORT_LEVELS_OF_STUDY;
+    case "SHORT_RACES_AND_ETHNICITIES":
+      return SHORT_RACES_AND_ETHNICITIES;
+    default:
+      return [];
+  }
+}
+
 export const FORM_QUESTION_TYPES = [
   { value: "SHORT_ANSWER", label: "Short answer" },
   { value: "PARAGRAPH", label: "Paragraph" },

From c472f8690ec861136db3c2df8db1216fd1050c7f Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 11:55:19 -0500
Subject: [PATCH 06/16] mobile ui fix

---
 .../src/app/admin/forms/[slug]/client.tsx     | 79 ++++++++++++++++---
 .../admin/forms/instruction-edit-card.tsx     | 61 +++++++++++---
 .../admin/forms/question-edit-card.tsx        | 55 +++++++++++--
 3 files changed, 169 insertions(+), 26 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index fded6d8ba..06d428f04 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -71,6 +71,10 @@ function SortableItem({
   onDuplicateInstruction,
   onClick,
   onForceSave,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp,
+  canMoveDown,
   error,
 }: {
   item: UIQuestion | UIInstruction;
@@ -83,6 +87,10 @@ function SortableItem({
   onDuplicateInstruction: (i: UIInstruction) => void;
   onClick: () => void;
   onForceSave: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  canMoveUp?: boolean;
+  canMoveDown?: boolean;
   error?: string;
 }) {
   const { attributes, listeners, setNodeRef, transform, transition } =
@@ -112,6 +120,10 @@ function SortableItem({
             onDelete={onDelete}
             onDuplicate={onDuplicateInstruction}
             dragHandleProps={listeners}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+            canMoveUp={canMoveUp}
+            canMoveDown={canMoveDown}
           />
         ) : (
           <QuestionEditCard
@@ -123,6 +135,10 @@ function SortableItem({
             onForceSave={onForceSave}
             error={error}
             dragHandleProps={listeners}
+            onMoveUp={onMoveUp}
+            onMoveDown={onMoveDown}
+            canMoveUp={canMoveUp}
+            canMoveDown={canMoveDown}
           />
         )}
       </div>
@@ -421,6 +437,45 @@ export function EditorClient({
     }),
   );
 
+  const reorderItems = React.useCallback(
+    (itemId: string, direction: "up" | "down") => {
+      const combined = [...questions, ...instructions].sort(
+        (a, b) => (a.order ?? 999) - (b.order ?? 999),
+      );
+      const currentIndex = combined.findIndex((item) => item.id === itemId);
+
+      if (currentIndex === -1) return;
+
+      const newIndex =
+        direction === "up" ? currentIndex - 1 : currentIndex + 1;
+
+      if (newIndex < 0 || newIndex >= combined.length) return;
+
+      const reordered = arrayMove(combined, currentIndex, newIndex);
+
+      // Update order and split back into separate arrays
+      const updatedItems = reordered.map((item, idx) => ({
+        ...item,
+        order: idx,
+      }));
+      const newQuestions: UIQuestion[] = [];
+      const newInstructions: UIInstruction[] = [];
+
+      updatedItems.forEach((item) => {
+        if ("question" in item) {
+          newQuestions.push(item as UIQuestion);
+        } else {
+          newInstructions.push(item as UIInstruction);
+        }
+      });
+
+      setQuestions(newQuestions);
+      setInstructions(newInstructions);
+      setTimeout(() => handleSaveForm(), 100);
+    },
+    [questions, instructions, handleSaveForm],
+  );
+
   const handleDragEnd = (event: DragEndEvent) => {
     const { active, over } = event;
     if (over && active.id !== over.id) {
@@ -463,12 +518,12 @@ export function EditorClient({
 
   return (
     <div
-      className="min-h-screen bg-primary/5 p-8 pb-32"
+      className="min-h-screen bg-primary/5 px-3 py-8 pb-32 md:px-8"
       onClick={() => setActiveItemId(null)}
     >
       <div className="mx-auto max-w-3xl space-y-4">
-        <div className="flex flex-col items-center justify-between gap-4 rounded-xl border bg-card/50 p-4 shadow-sm backdrop-blur-sm md:flex-row">
-          <div className="flex items-center gap-4">
+        <div className="flex flex-col gap-3 rounded-xl border bg-card/50 p-3 shadow-sm backdrop-blur-sm md:flex-row md:items-center md:justify-between md:gap-4 md:p-4">
+          <div className="flex items-center gap-3 md:gap-4">
             <Button
               variant="ghost"
               size="icon"
@@ -483,7 +538,7 @@ export function EditorClient({
             </div>
           </div>
 
-          <div className="flex items-center gap-8">
+          <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-6 lg:gap-8">
             <div className="flex items-center gap-3">
               <Switch
                 id="dues-only"
@@ -588,7 +643,7 @@ export function EditorClient({
         </div>
 
         <Card className="overflow-hidden border-t-[12px] border-t-primary bg-card shadow-lg transition-all">
-          <div className="flex flex-col gap-2 p-8">
+          <div className="flex flex-col gap-2 px-4 py-8 md:px-8">
             <Input
               className="h-auto border-none p-0 text-4xl font-extrabold focus-visible:ring-0"
               placeholder="Form Title"
@@ -632,8 +687,10 @@ export function EditorClient({
                 <div className="space-y-4">
                   {[...questions, ...instructions]
                     .sort((a, b) => (a.order ?? 999) - (b.order ?? 999))
-                    .map((item) => {
+                    .map((item, index, sortedArray) => {
                       const isInstruction = "title" in item;
+                      const canMoveUp = index > 0;
+                      const canMoveDown = index < sortedArray.length - 1;
                       return (
                         <div
                           key={item.id}
@@ -650,6 +707,10 @@ export function EditorClient({
                             onDuplicateInstruction={duplicateInstruction}
                             onClick={() => setActiveItemId(item.id)}
                             onForceSave={handleSaveForm}
+                            onMoveUp={() => reorderItems(item.id, "up")}
+                            onMoveDown={() => reorderItems(item.id, "down")}
+                            canMoveUp={canMoveUp}
+                            canMoveDown={canMoveDown}
                             error={
                               !isInstruction && duplicateIds.has(item.id)
                                 ? "Duplicate question title"
@@ -663,14 +724,14 @@ export function EditorClient({
               </SortableContext>
             </DndContext>
 
-            <div className="flex justify-center gap-4 pt-8">
+            <div className="flex flex-col justify-center gap-3 pt-8 md:flex-row md:gap-4">
               <Button
                 onClick={(e) => {
                   e.stopPropagation();
                   addQuestion();
                 }}
                 size="lg"
-                className="h-14 rounded-full px-10 text-lg font-bold shadow-2xl transition-all hover:scale-105 active:scale-95"
+                className="h-14 rounded-full px-6 text-lg font-bold shadow-2xl transition-all hover:scale-105 active:scale-95 md:px-10"
               >
                 <Plus className="mr-3 h-6 w-6" /> Add Question
               </Button>
@@ -681,7 +742,7 @@ export function EditorClient({
                 }}
                 size="lg"
                 variant="secondary"
-                className="h-14 rounded-full px-10 text-lg font-bold shadow-2xl transition-all hover:scale-105 active:scale-95"
+                className="h-14 rounded-full px-6 text-lg font-bold shadow-2xl transition-all hover:scale-105 active:scale-95 md:px-10"
               >
                 <Plus className="mr-3 h-6 w-6" /> Add Instruction
               </Button>
diff --git a/apps/blade/src/components/admin/forms/instruction-edit-card.tsx b/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
index edbada17e..8dfe6dbc3 100644
--- a/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
@@ -1,10 +1,9 @@
 "use client";
 
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
-import type { z } from "zod";
-import { useRef, useState } from "react";
-import Image from "next/image";
 import {
+  ArrowDown,
+  ArrowUp,
   Copy,
   GripHorizontal,
   Image as ImageIcon,
@@ -13,6 +12,9 @@ import {
   Video,
   X,
 } from "lucide-react";
+import Image from "next/image";
+import { useRef, useState } from "react";
+import type { z } from "zod";
 
 import type { InstructionValidator } from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";
@@ -20,6 +22,7 @@ import { Button } from "@forge/ui/button";
 import { Card } from "@forge/ui/card";
 import { Textarea } from "@forge/ui/textarea";
 import { toast } from "@forge/ui/toast";
+import { useMediaQuery } from "@forge/ui/use-media-query";
 
 import { api } from "~/trpc/react";
 
@@ -31,6 +34,10 @@ interface InstructionEditCardProps {
   onUpdate: (updatedInstruction: FormInstruction & { id: string }) => void;
   onDelete: (id: string) => void;
   onDuplicate: (instruction: FormInstruction & { id: string }) => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  canMoveUp?: boolean;
+  canMoveDown?: boolean;
   dragHandleProps?: DraggableSyntheticListeners;
 }
 
@@ -41,7 +48,12 @@ export function InstructionEditCard({
   onDelete,
   onDuplicate,
   dragHandleProps,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp = false,
+  canMoveDown = false,
 }: InstructionEditCardProps) {
+  const isMobile = !useMediaQuery("(min-width: 768px)");
   const [isUploadingImage, setIsUploadingImage] = useState(false);
   const [isUploadingVideo, setIsUploadingVideo] = useState(false);
   const imageInputRef = useRef<HTMLInputElement>(null);
@@ -154,7 +166,7 @@ export function InstructionEditCard({
   return (
     <Card
       className={cn(
-        "relative flex flex-col gap-4 bg-card p-6 text-card-foreground transition-all",
+        "relative flex flex-col gap-4 bg-card px-4 py-6 text-card-foreground transition-all md:p-6",
         "mt-12 border-t-4 border-t-primary shadow-lg",
       )}
     >
@@ -296,12 +308,41 @@ export function InstructionEditCard({
 
       {/* 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"
-          {...dragHandleProps}
-        >
-          <GripHorizontal className="h-5 w-5 rotate-90" />
-        </div>
+        {isMobile ? (
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMoveUp?.();
+              }}
+              disabled={!canMoveUp}
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Move up"
+            >
+              <ArrowUp className="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMoveDown?.();
+              }}
+              disabled={!canMoveDown}
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Move down"
+            >
+              <ArrowDown className="h-5 w-5" />
+            </button>
+          </div>
+        ) : (
+          <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">
           <Copy
             className="h-5 w-5 cursor-pointer text-gray-500 hover:text-gray-700"
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 e20e1f9cd..9b401bc82 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -3,6 +3,8 @@
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
 import {
   AlignLeft,
+  ArrowDown,
+  ArrowUp,
   AtSign,
   Calendar,
   CheckSquare,
@@ -48,6 +50,7 @@ import {
 import { Slider } from "@forge/ui/slider";
 import { Textarea } from "@forge/ui/textarea";
 import { TimePicker } from "@forge/ui/time-picker";
+import { useMediaQuery } from "@forge/ui/use-media-query";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;
 type QuestionType = FormQuestion["type"];
@@ -59,6 +62,10 @@ interface QuestionEditCardProps {
   onDelete: (id: string) => void;
   onDuplicate: (question: FormQuestion & { id: string }) => void;
   onForceSave?: () => void;
+  onMoveUp?: () => void;
+  onMoveDown?: () => void;
+  canMoveUp?: boolean;
+  canMoveDown?: boolean;
   error?: string;
   dragHandleProps?: DraggableSyntheticListeners;
 }
@@ -89,7 +96,12 @@ export function QuestionEditCard({
   onForceSave,
   error,
   dragHandleProps,
+  onMoveUp,
+  onMoveDown,
+  canMoveUp = false,
+  canMoveDown = false,
 }: QuestionEditCardProps) {
+  const isMobile = !useMediaQuery("(min-width: 768px)");
   // -- Handlers --
 
   const handleTitleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
@@ -144,7 +156,7 @@ export function QuestionEditCard({
   return (
     <Card
       className={cn(
-        "relative flex flex-col gap-4 border-l-4 bg-card p-6 text-card-foreground transition-all",
+        "relative flex flex-col gap-4 border-l-4 bg-card px-4 py-6 text-card-foreground transition-all md:p-6",
         isActive
           ? "border-l-primary shadow-md ring-1 ring-black/5"
           : "border-l-transparent hover:bg-muted/50",
@@ -210,12 +222,41 @@ 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"
-          {...dragHandleProps}
-        >
-          <GripHorizontal className="h-5 w-5 rotate-90" />
-        </div>
+        {isMobile ? (
+          <div className="flex items-center gap-1">
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMoveUp?.();
+              }}
+              disabled={!canMoveUp}
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Move up"
+            >
+              <ArrowUp className="h-5 w-5" />
+            </button>
+            <button
+              type="button"
+              onClick={(e) => {
+                e.stopPropagation();
+                onMoveDown?.();
+              }}
+              disabled={!canMoveDown}
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              aria-label="Move down"
+            >
+              <ArrowDown className="h-5 w-5" />
+            </button>
+          </div>
+        ) : (
+          <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">
           <div className="mr-4 flex items-center gap-2 border-r pr-4">
             <Copy

From 7b67862eb30eb4045510150f6a224f0c7c1e8167 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:07:40 -0500
Subject: [PATCH 07/16] better section management

---
 .../forms/section-manager-dialog.tsx          | 303 +++++++++++++++---
 packages/api/src/routers/forms.ts             | 203 +++++++++++-
 packages/db/src/schemas/knight-hacks.ts       |  35 +-
 3 files changed, 483 insertions(+), 58 deletions(-)

diff --git a/apps/blade/src/components/forms/section-manager-dialog.tsx b/apps/blade/src/components/forms/section-manager-dialog.tsx
index fd3424114..d9670ef13 100644
--- a/apps/blade/src/components/forms/section-manager-dialog.tsx
+++ b/apps/blade/src/components/forms/section-manager-dialog.tsx
@@ -1,7 +1,7 @@
 "use client";
 
-import { useState } from "react";
-import { Pencil, Plus, Trash2, X } from "lucide-react";
+import { ArrowDown, ArrowUp, Pencil, Plus, Trash2, Users, X } from "lucide-react";
+import { useEffect, useState } from "react";
 import * as z from "zod";
 
 import { Button } from "@forge/ui/button";
@@ -38,6 +38,10 @@ const createSectionSchema = z.object({
   roleIds: z.array(z.string().uuid()).optional().default([]),
 });
 
+const editSectionRolesSchema = z.object({
+  roleIds: z.array(z.string().uuid()).optional().default([]),
+});
+
 export function SectionManagerDialog({
   trigger,
 }: {
@@ -45,8 +49,11 @@ export function SectionManagerDialog({
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [editingSection, setEditingSection] = useState<string | null>(null);
+  const [editingRolesFor, setEditingRolesFor] = useState<string | null>(null);
   const [isCreatingNew, setIsCreatingNew] = useState(false);
-  const utils = api.useUtils();
+  const [sectionRolesMap, setSectionRolesMap] = useState<
+    Map<string, { id: string; name: string }[]>
+  >(new Map());
 
   const { data: sections = [] } = api.forms.getSections.useQuery(undefined, {
     enabled: isOpen,
@@ -59,10 +66,39 @@ export function SectionManagerDialog({
     },
   );
 
-  const { data: roles = [] } = api.roles.getAllLinks.useQuery(undefined, {
-    enabled: isOpen && isCreatingNew,
+  const { data: allRoles = [] } = api.roles.getAllLinks.useQuery(undefined, {
+    enabled: isOpen,
   });
 
+  const utils = api.useUtils();
+
+  useEffect(() => {
+    if (!isOpen || sections.length === 0) return;
+
+    const fetchSectionRoles = async () => {
+      const newRolesMap = new Map<string, { id: string; name: string }[]>();
+      
+      await Promise.all(
+        sections
+          .filter((s) => s !== "General")
+          .map(async (section) => {
+            try {
+              const roles = await utils.forms.getSectionRoles.fetch({
+                sectionName: section,
+              });
+              newRolesMap.set(section, roles);
+            } catch {
+              newRolesMap.set(section, []);
+            }
+          }),
+      );
+
+      setSectionRolesMap(newRolesMap);
+    };
+
+    void fetchSectionRoles();
+  }, [isOpen, sections, utils.forms.getSectionRoles]);
+
   const countMap = new Map<string, number>();
   if (Array.isArray(sectionCounts)) {
     for (const sc of sectionCounts) {
@@ -87,6 +123,13 @@ export function SectionManagerDialog({
     },
   });
 
+  const editRolesForm = useForm({
+    schema: editSectionRolesSchema,
+    defaultValues: {
+      roleIds: [],
+    },
+  });
+
   const renameSection = api.forms.renameSection.useMutation({
     onSuccess() {
       toast.success("Section renamed");
@@ -134,6 +177,48 @@ export function SectionManagerDialog({
     },
   });
 
+  const updateSectionRoles = api.forms.updateSectionRoles.useMutation({
+    onSuccess(_, variables) {
+      toast.success("Section roles updated");
+      setEditingRolesFor(null);
+      editRolesForm.reset();
+      void utils.forms.getSectionRoles
+        .fetch({ sectionName: variables.sectionName })
+        .then((roles) => {
+          setSectionRolesMap((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(variables.sectionName, roles);
+            return newMap;
+          });
+        })
+        .catch(() => {
+          setSectionRolesMap((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(variables.sectionName, []);
+            return newMap;
+          });
+        });
+    },
+    onError(error: unknown) {
+      const message =
+        error && typeof error === "object" && "message" in error
+          ? String(error.message)
+          : "Failed to update section roles";
+      toast.error(message);
+    },
+    async onSettled() {
+      await utils.forms.getSectionRoles.invalidate();
+      await utils.forms.getSections.invalidate();
+    },
+  });
+
+  const reorderSection = api.forms.reorderSection.useMutation({
+    async onSettled() {
+      await utils.forms.getSections.invalidate();
+      await utils.forms.getForms.invalidate();
+    },
+  });
+
   const handleRename = (oldName: string) => {
     const newName = renameForm.getValues().name;
     if (!newName || newName === oldName) {
@@ -175,7 +260,6 @@ export function SectionManagerDialog({
               <Form {...createSectionForm}>
                 <form
                   onSubmit={createSectionForm.handleSubmit((values) => {
-                    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
                     createSection.mutate({
                       name: values.name,
                       roleIds: values.roleIds,
@@ -213,7 +297,7 @@ export function SectionManagerDialog({
                           </FormDescription>
                         </div>
                         <div className="max-h-60 space-y-3 overflow-y-auto rounded-md border p-3">
-                          {roles.map((role) => (
+                          {allRoles.map((role) => (
                             <FormField
                               key={role.id}
                               control={createSectionForm.control}
@@ -249,7 +333,7 @@ export function SectionManagerDialog({
                               }}
                             />
                           ))}
-                          {roles.length === 0 && (
+                          {allRoles.length === 0 && (
                             <p className="text-sm text-muted-foreground">
                               No roles available. All users will have access.
                             </p>
@@ -279,12 +363,18 @@ export function SectionManagerDialog({
             </div>
           )}
 
-          {sections.map((section: string) => (
-            <div
-              key={section}
-              className="flex items-center justify-between rounded-md border p-3"
-            >
-              {editingSection === section ? (
+          {sections.map((section: string, index) => {
+            const sectionRoles = sectionRolesMap.get(section) ?? [];
+            const isEditingRoles = editingRolesFor === section;
+            const canMoveUp = index > 0;
+            const canMoveDown = index < sections.length - 1;
+
+            return (
+              <div
+                key={section}
+                className="space-y-2 rounded-md border p-3"
+              >
+                {editingSection === section ? (
                 <Form {...renameForm}>
                   <form
                     onSubmit={renameForm.handleSubmit(() =>
@@ -323,40 +413,177 @@ export function SectionManagerDialog({
                     </Button>
                   </form>
                 </Form>
+              ) : isEditingRoles ? (
+                <div className="space-y-3">
+                  <Form {...editRolesForm}>
+                    <form
+                      onSubmit={editRolesForm.handleSubmit((values) => {
+                        updateSectionRoles.mutate({
+                          sectionName: section,
+                          roleIds: values.roleIds,
+                        } as { sectionName: string; roleIds: string[] });
+                      })}
+                      className="space-y-3"
+                    >
+                      <FormField
+                        control={editRolesForm.control}
+                        name="roleIds"
+                        render={() => (
+                          <FormItem>
+                            <div className="mb-2">
+                              <FormLabel>Restrict to Roles (Optional)</FormLabel>
+                              <FormDescription>
+                                Select one or more roles that can access this
+                                section. Leave empty to allow all users with form
+                                access.
+                              </FormDescription>
+                            </div>
+                            <div className="max-h-60 space-y-3 overflow-y-auto rounded-md border p-3">
+                              {allRoles.map((role) => (
+                                <FormField
+                                  key={role.id}
+                                  control={editRolesForm.control}
+                                  name="roleIds"
+                                  render={({ field }) => {
+                                    return (
+                                      <FormItem
+                                        key={role.id}
+                                        className="flex flex-row items-start space-x-3 space-y-0"
+                                      >
+                                        <FormControl>
+                                          <Checkbox
+                                            checked={field.value?.includes(role.id)}
+                                            onCheckedChange={(checked) => {
+                                              return checked
+                                                ? field.onChange([
+                                                    ...(field.value ?? []),
+                                                    role.id,
+                                                  ])
+                                                : field.onChange(
+                                                    field.value?.filter(
+                                                      (value) => value !== role.id,
+                                                    ) ?? [],
+                                                  );
+                                            }}
+                                          />
+                                        </FormControl>
+                                        <FormLabel className="cursor-pointer font-normal">
+                                          {role.name}
+                                        </FormLabel>
+                                      </FormItem>
+                                    );
+                                  }}
+                                />
+                              ))}
+                            </div>
+                          </FormItem>
+                        )}
+                      />
+                      <div className="flex gap-2">
+                        <Button type="submit" size="sm">
+                          Save
+                        </Button>
+                        <Button
+                          type="button"
+                          size="sm"
+                          variant="ghost"
+                          onClick={() => {
+                            setEditingRolesFor(null);
+                            editRolesForm.reset();
+                          }}
+                        >
+                          <X className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </form>
+                  </Form>
+                </div>
               ) : (
                 <>
-                  <div className="flex flex-col gap-1">
-                    <span className="font-medium">{section}</span>
-                    <span className="text-sm text-muted-foreground">
-                      {countMap.get(section) ?? 0}{" "}
-                      {countMap.get(section) === 1 ? "form" : "forms"}
-                    </span>
-                  </div>
-                  <div className="flex gap-2">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => {
-                        setEditingSection(section);
-                        renameForm.setValue("name", section);
-                      }}
-                    >
-                      <Pencil className="h-4 w-4" />
-                    </Button>
-                    {section !== "General" && (
+                  <div className="flex items-center justify-between">
+                    <div className="flex flex-1 items-center gap-2">
+                      <div className="flex flex-col gap-1">
+                        <span className="font-medium">{section}</span>
+                        <span className="text-sm text-muted-foreground">
+                          {countMap.get(section) ?? 0}{" "}
+                          {countMap.get(section) === 1 ? "form" : "forms"}
+                        </span>
+                        {section !== "General" && sectionRoles.length > 0 && (
+                          <span className="text-xs text-muted-foreground">
+                            Roles: {sectionRoles.map((r) => r.name).join(", ")}
+                          </span>
+                        )}
+                        {section !== "General" &&
+                          sectionRoles.length === 0 && (
+                            <span className="text-xs text-muted-foreground">
+                              All users with form access
+                            </span>
+                          )}
+                      </div>
+                    </div>
+                    <div className="flex gap-2">
+                      {section !== "General" && (
+                        <>
+                          <button
+                            type="button"
+                            onClick={() => reorderSection.mutate({ sectionName: section, direction: "up" })}
+                            disabled={!canMoveUp}
+                            className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+                            aria-label="Move up"
+                          >
+                            <ArrowUp className="h-4 w-4" />
+                          </button>
+                          <button
+                            type="button"
+                            onClick={() => reorderSection.mutate({ sectionName: section, direction: "down" })}
+                            disabled={!canMoveDown}
+                            className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+                            aria-label="Move down"
+                          >
+                            <ArrowDown className="h-4 w-4" />
+                          </button>
+                        </>
+                      )}
+                      {section !== "General" && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => {
+                            setEditingRolesFor(section);
+                            const currentRoleIds = sectionRoles.map((r) => r.id);
+                            editRolesForm.setValue("roleIds", currentRoleIds);
+                          }}
+                          title="Edit roles"
+                        >
+                          <Users className="h-4 w-4" />
+                        </Button>
+                      )}
                       <Button
                         variant="ghost"
                         size="sm"
-                        onClick={() => handleDelete(section)}
+                        onClick={() => {
+                          setEditingSection(section);
+                          renameForm.setValue("name", section);
+                        }}
                       >
-                        <Trash2 className="h-4 w-4" />
+                        <Pencil className="h-4 w-4" />
                       </Button>
-                    )}
+                      {section !== "General" && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => handleDelete(section)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
                   </div>
                 </>
               )}
-            </div>
-          ))}
+              </div>
+            );
+          })}
         </div>
 
         <DialogFooter className="flex items-center justify-between">
diff --git a/packages/api/src/routers/forms.ts b/packages/api/src/routers/forms.ts
index 019216ecb..30dc85183 100644
--- a/packages/api/src/routers/forms.ts
+++ b/packages/api/src/routers/forms.ts
@@ -714,12 +714,19 @@ export const formsRouter = {
     }
 
     const allDbSections = await db
-      .select({ id: FormSections.id, name: FormSections.name })
-      .from(FormSections);
+      .select({
+        id: FormSections.id,
+        name: FormSections.name,
+        order: FormSections.order,
+      })
+      .from(FormSections)
+      .orderBy(FormSections.order);
 
     const sectionIdToName = new Map<string, string>();
+    const sectionIdToOrder = new Map<string, number>();
     for (const section of allDbSections) {
       sectionIdToName.set(section.id, section.name);
+      sectionIdToOrder.set(section.id, section.order);
     }
 
     const accessibleSectionIds = new Set<string>();
@@ -773,7 +780,26 @@ export const formsRouter = {
       }
     }
 
-    return Array.from(allSections).sort();
+    const sortedSections = Array.from(allSections).sort((a, b) => {
+      if (a === "General") return -1;
+      if (b === "General") return 1;
+      
+      let aOrder = 999;
+      let bOrder = 999;
+      
+      for (const section of allDbSections) {
+        if (section.name === a) {
+          aOrder = section.order;
+        }
+        if (section.name === b) {
+          bOrder = section.order;
+        }
+      }
+      
+      return aOrder - bOrder;
+    });
+    
+    return sortedSections;
   }),
 
   getSectionCounts: permProcedure.query(async ({ ctx }) => {
@@ -923,10 +949,17 @@ export const formsRouter = {
         }
       }
 
+      const maxOrderResult = await db
+        .select({ maxOrder: sql<number>`COALESCE(MAX(${FormSections.order}), 0)` })
+        .from(FormSections);
+      
+      const maxOrder = maxOrderResult[0]?.maxOrder ?? 0;
+
       const [newSection] = await db
         .insert(FormSections)
         .values({
           name: input.name,
+          order: maxOrder + 1,
         })
         .returning();
 
@@ -959,6 +992,170 @@ export const formsRouter = {
       });
     }),
 
+  getSectionRoles: permProcedure
+    .input(z.object({ sectionName: z.string() }))
+    .query(async ({ input, ctx }) => {
+      controlPerms.or(["READ_FORMS", "EDIT_FORMS"], ctx);
+
+      const section = await db.query.FormSections.findFirst({
+        where: (t, { eq }) => eq(t.name, input.sectionName),
+      });
+
+      if (!section) {
+        return [];
+      }
+
+      const sectionRoles = await db
+        .select({
+          roleId: FormSectionRoles.roleId,
+        })
+        .from(FormSectionRoles)
+        .where(eq(FormSectionRoles.sectionId, section.id));
+
+      const roleIds = sectionRoles.map((sr) => sr.roleId);
+
+      if (roleIds.length === 0) {
+        return [];
+      }
+
+      const roles = await db
+        .select({ id: Roles.id, name: Roles.name })
+        .from(Roles)
+        .where(inArray(Roles.id, roleIds));
+
+      return roles;
+    }),
+
+  updateSectionRoles: permProcedure
+    .input(
+      z.object({
+        sectionName: z.string(),
+        roleIds: z.array(z.string().uuid()),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      controlPerms.or(["EDIT_FORMS"], ctx);
+
+      const section = await db.query.FormSections.findFirst({
+        where: (t, { eq }) => eq(t.name, input.sectionName),
+      });
+
+      if (!section) {
+        throw new TRPCError({
+          message: "Section not found",
+          code: "NOT_FOUND",
+        });
+      }
+
+      const isOfficer = ctx.session.permissions.IS_OFFICER;
+
+      if (input.roleIds.length && !isOfficer) {
+        const userRoles = await db
+          .select({ roleId: Permissions.roleId })
+          .from(Permissions)
+          .where(
+            sql`cast(${Permissions.userId} as text) = ${ctx.session.user.id}`,
+          );
+
+        const userRoleIds = new Set(userRoles.map((r) => r.roleId));
+
+        const hasAllRoles = input.roleIds.every((roleId) =>
+          userRoleIds.has(roleId),
+        );
+
+        if (!hasAllRoles) {
+          throw new TRPCError({
+            message:
+              "You don't have permission to assign sections to one or more of the selected roles",
+            code: "UNAUTHORIZED",
+          });
+        }
+      }
+
+      await db
+        .delete(FormSectionRoles)
+        .where(eq(FormSectionRoles.sectionId, section.id));
+
+      if (input.roleIds.length > 0) {
+        await db.insert(FormSectionRoles).values(
+          input.roleIds.map((roleId) => ({
+            sectionId: section.id,
+            roleId,
+          })),
+        );
+      }
+
+      const roleNames = await db
+        .select({ name: Roles.name })
+        .from(Roles)
+        .where(inArray(Roles.id, input.roleIds));
+
+      await log({
+        title: `Form section roles updated`,
+        message: `**Form section:** ${input.sectionName}. Roles: ${roleNames.length > 0 ? roleNames.map((r) => r.name).join(", ") : "None (all users)"}`,
+        color: "success_green",
+        userId: ctx.session.user.discordUserId,
+      });
+    }),
+
+  reorderSection: permProcedure
+    .input(
+      z.object({
+        sectionName: z.string(),
+        direction: z.enum(["up", "down"]),
+      }),
+    )
+    .mutation(async ({ input, ctx }) => {
+      controlPerms.or(["EDIT_FORMS"], ctx);
+
+      const allSections = await db
+        .select({
+          id: FormSections.id,
+          name: FormSections.name,
+          order: FormSections.order,
+        })
+        .from(FormSections)
+        .orderBy(FormSections.order);
+
+      const currentIndex = allSections.findIndex(
+        (s) => s.name === input.sectionName,
+      );
+
+      if (currentIndex === -1) {
+        throw new TRPCError({
+          message: "Section not found",
+          code: "NOT_FOUND",
+        });
+      }
+
+      const newIndex =
+        input.direction === "up" ? currentIndex - 1 : currentIndex + 1;
+
+      if (newIndex < 0 || newIndex >= allSections.length) {
+        return;
+      }
+
+      const currentSection = allSections[currentIndex];
+      const targetSection = allSections[newIndex];
+
+      await db
+        .update(FormSections)
+        .set({ order: targetSection?.order ?? newIndex })
+        .where(eq(FormSections.id, currentSection?.id ?? ""));
+
+      await db
+        .update(FormSections)
+        .set({ order: currentSection?.order ?? currentIndex })
+        .where(eq(FormSections.id, targetSection?.id ?? ""));
+
+      await log({
+        title: `Form section reordered`,
+        message: `**Form section:** ${input.sectionName} moved ${input.direction}`,
+        color: "success_green",
+        userId: ctx.session.user.discordUserId,
+      });
+    }),
+
   checkFormEditAccess: permProcedure
     .input(z.object({ slug_name: z.string() }))
     .query(async ({ input, ctx }) => {
diff --git a/packages/db/src/schemas/knight-hacks.ts b/packages/db/src/schemas/knight-hacks.ts
index 8515ae619..e6c46289e 100644
--- a/packages/db/src/schemas/knight-hacks.ts
+++ b/packages/db/src/schemas/knight-hacks.ts
@@ -1,27 +1,27 @@
 import { relations } from "drizzle-orm";
 import {
-    pgEnum,
-    pgTableCreator,
-    primaryKey,
-    unique,
+  pgEnum,
+  pgTableCreator,
+  primaryKey,
+  unique,
 } from "drizzle-orm/pg-core";
 import { createInsertSchema } from "drizzle-zod";
 import z from "zod";
 
 import {
-    COUNTRIES,
-    DEFAULT_EMAIL_QUEUE_CRON_SCHEDULE,
-    EVENT_FEEDBACK_HEARD,
-    EVENT_FEEDBACK_SIMILAR_EVENT,
-    EVENT_TAGS,
-    GENDERS,
-    HACKATHON_APPLICATION_STATES,
-    LEVELS_OF_STUDY,
-    MAJORS,
-    RACES_OR_ETHNICITIES,
-    SCHOOLS,
-    SHIRT_SIZES,
-    SPONSOR_TIERS,
+  COUNTRIES,
+  DEFAULT_EMAIL_QUEUE_CRON_SCHEDULE,
+  EVENT_FEEDBACK_HEARD,
+  EVENT_FEEDBACK_SIMILAR_EVENT,
+  EVENT_TAGS,
+  GENDERS,
+  HACKATHON_APPLICATION_STATES,
+  LEVELS_OF_STUDY,
+  MAJORS,
+  RACES_OR_ETHNICITIES,
+  SCHOOLS,
+  SHIRT_SIZES,
+  SPONSOR_TIERS,
 } from "@forge/consts/knight-hacks";
 
 import { Roles, User } from "./auth";
@@ -540,6 +540,7 @@ export const InsertOtherCompaniesSchema = createInsertSchema(OtherCompanies);
 export const FormSections = createTable("form_sections", (t) => ({
   id: t.uuid().notNull().primaryKey().defaultRandom(),
   name: t.varchar({ length: 255 }).notNull().unique(),
+  order: t.integer().notNull().default(0),
   createdAt: t.timestamp().notNull().defaultNow(),
 }));
 

From d5df53ccf436fa9d99481e2d51b9cd1a39884b2c Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:09:00 -0500
Subject: [PATCH 08/16] width fixes on text entry

---
 .../_components/question-response-card.tsx           | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index 81e9f6a86..0ff21d31c 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -231,7 +231,7 @@ function QuestionBody({
 
     case "EMAIL":
       return (
-        <div className="w-full md:w-2/3">
+        <div className="w-full">
           <Input
             type="email"
             placeholder="your.email@example.com"
@@ -246,7 +246,7 @@ function QuestionBody({
 
     case "NUMBER":
       return (
-        <div className="w-full md:w-1/3">
+        <div className="w-full">
           <Input
             type="number"
             placeholder="Enter a number"
@@ -272,7 +272,7 @@ function QuestionBody({
 
     case "PHONE":
       return (
-        <div className="w-full md:w-2/3">
+        <div className="w-full">
           <Input
             type="tel"
             placeholder="(123) 456-7890"
@@ -322,7 +322,7 @@ function QuestionBody({
 
     case "LINK":
       return (
-        <div className="w-full md:w-2/3">
+        <div className="w-full">
           <Input
             type="url"
             placeholder="https://example.com"
@@ -440,7 +440,7 @@ function MultipleChoiceInput({
       {allowOther &&
         (isOtherSelected ||
           (typeof value === "string" && value === OTHER_VALUE)) && (
-        <div className="ml-7 w-full md:w-2/3">
+        <div className="ml-7 w-full">
           <Input
             placeholder="Please specify"
             value={otherText}
@@ -589,7 +589,7 @@ function CheckboxesInput({
         </div>
       )}
       {allowOther && isOtherChecked && (
-        <div className="ml-7 w-full md:w-2/3">
+        <div className="ml-7 w-full">
           <Input
             placeholder="Please specify"
             value={otherText}

From 0fbec1fe316309c5d607298ff182a3766257b385 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:21:18 -0500
Subject: [PATCH 09/16] funding req

---
 .../src/app/admin/forms/[slug]/client.tsx     |  17 +-
 packages/api/src/routers/misc.ts              | 165 +++++++++++++++++-
 2 files changed, 177 insertions(+), 5 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index 06d428f04..79d8866ec 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -525,16 +525,25 @@ export function EditorClient({
         <div className="flex flex-col gap-3 rounded-xl border bg-card/50 p-3 shadow-sm backdrop-blur-sm md:flex-row md:items-center md:justify-between md:gap-4 md:p-4">
           <div className="flex items-center gap-3 md:gap-4">
             <Button
-              variant="ghost"
+              variant="primary"
               size="icon"
               onClick={() => router.push("/admin/forms")}
               aria-label="Back to forms"
             >
               <ArrowLeft className="h-4 w-4" />
             </Button>
-            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-              <Save className="h-3 w-3" />
-              {saveStatus || "Synced with Database"}
+            <div className="flex items-center gap-2">
+              <Button
+                variant="primary"
+                size="icon"
+                onClick={handleSaveForm}
+                aria-label="Save form"
+              >
+                <Save className="h-3 w-3" />
+              </Button>
+              <span className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                {saveStatus || "Synced with Database"}
+              </span>
             </div>
           </div>
 
diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index 15b4a8ab4..addf5a7fc 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -5,7 +5,7 @@ import { z } from "zod";
 import { RECRUITING_CHANNEL, TEAM_MAP } from "@forge/consts/knight-hacks";
 
 import { protectedProcedure } from "../trpc";
-import { discord } from "../utils";
+import { discord, sendEmail } from "../utils";
 
 // Miscellaneous routes (primarily for form integrations)
 export const miscRouter = {
@@ -91,4 +91,167 @@ export const miscRouter = {
         },
       });
     }),
+
+    fundingRequest: protectedProcedure
+    .meta({
+      id: "fundingRequest",
+      inputSchema: z.object({
+        team: z.string().min(1),
+        description: z.string(),
+        amount: z.number(),
+        itemization: z.string(),
+        importance: z.number(),
+        dateNeeded: z.date(),
+        deadlineType: z.string(),
+      }),
+    })
+    .input(
+      z.object({
+        team: z.string().min(1),
+        description: z.string(),
+        amount: z.number(),
+        itemization: z.string(),
+        importance: z.number(),
+        dateNeeded: z.date(),
+        deadlineType: z.string(),
+      }),
+    )
+    .mutation(async ({ input }) => {
+      // Helper function to escape HTML and preserve newlines
+      const formatText = (text: string | null | undefined): string => {
+        if (!text) return "N/A";
+        return text
+          .replace(/&/g, "&amp;")
+          .replace(/</g, "&lt;")
+          .replace(/>/g, "&gt;")
+          .replace(/"/g, "&quot;")
+          .replace(/'/g, "&#039;")
+          .replace(/\n/g, "<br>");
+      };
+
+      const htmlContent = `
+        <!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        </head>
+        <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5; line-height: 1.6; color: #333333;">
+          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 20px 0;">
+            <tr>
+              <td align="center">
+                <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 600px;">
+                  <!-- Header -->
+                  <tr>
+                    <td style="padding: 32px 40px 24px 40px; border-bottom: 1px solid #e5e5e5;">
+                      <h1 style="margin: 0; font-size: 24px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.5px;">
+                        Funding Request
+                      </h1>
+                      <p style="margin: 8px 0 0 0; font-size: 14px; color: #666666;">
+                        A new funding request has been submitted for the <strong style="color: #1a1a1a;">${input.team}</strong> team
+                      </p>
+                    </td>
+                  </tr>
+                  
+                  <!-- Content -->
+                  <tr>
+                    <td style="padding: 32px 40px;">
+                      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top; width: 140px;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Team:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${input.team}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Amount:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #059669; font-size: 16px; font-weight: 600;">
+                            $${input.amount.toLocaleString()}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Date Needed:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${input.dateNeeded.toLocaleDateString("en-US", { 
+                              year: "numeric", 
+                              month: "long", 
+                              day: "numeric" 
+                            })}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Importance:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px;">
+                            <span style="display: inline-block; background-color: #eff6ff; color: #1e40af; padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: 500;">
+                              ${input.importance}/10
+                            </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Deadline Type:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${input.deadlineType || "N/A"}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 8px; vertical-align: top; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Description:</strong>
+                          </td>
+                          <td style="padding-bottom: 8px; padding-top: 8px; border-top: 1px solid #e5e5e5; color: #333333; font-size: 14px; white-space: pre-wrap;">
+                            ${formatText(input.description)}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top; padding-top: 16px;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Itemization:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; padding-top: 16px; color: #333333; font-size: 14px; white-space: pre-wrap;">
+                            ${formatText(input.itemization)}
+                          </td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                  
+                  <!-- Footer -->
+                  <tr>
+                    <td style="padding: 24px 40px; background-color: #f9fafb; border-top: 1px solid #e5e5e5; border-radius: 0 0 8px 8px;">
+                      <p style="margin: 0; font-size: 12px; color: #999999; text-align: center;">
+                        Submitted at ${new Date().toLocaleString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                          hour: "numeric",
+                          minute: "2-digit",
+                          hour12: true
+                        })}
+                      </p>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </body>
+        </html>
+      `.trim();
+
+      await sendEmail({
+        to: "treasurer@knighthacks.org",
+        subject: `KHFR - $${input.amount.toLocaleString()} | ${input.dateNeeded.toLocaleDateString()} | ${input.team}`,
+        html: htmlContent,
+        from: "funding-requests@knighthacks.org",
+      });
+    }),
 } satisfies TRPCRouterRecord;

From adaeda3d11ca12da599210df78feef51247dbf3f Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:30:42 -0500
Subject: [PATCH 10/16] style fix again + misc router fix

---
 .../admin/forms/question-edit-card.tsx        | 10 ++--
 packages/api/src/routers/misc.ts              | 46 +++++++++++--------
 packages/api/src/utils.ts                     | 27 +++++++++--
 3 files changed, 55 insertions(+), 28 deletions(-)

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 9b401bc82..a2f95289d 100644
--- a/apps/blade/src/components/admin/forms/question-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/question-edit-card.tsx
@@ -300,7 +300,7 @@ function QuestionBody({
   switch (question.type) {
     case "SHORT_ANSWER":
       return (
-        <div className="w-1/2">
+        <div className="w-full">
           <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"
@@ -336,7 +336,7 @@ function QuestionBody({
       );
     case "EMAIL":
       return (
-        <div className="w-1/2">
+        <div className="w-full">
           <Input
             type="email"
             placeholder="email@example.com"
@@ -347,7 +347,7 @@ function QuestionBody({
       );
     case "NUMBER":
       return (
-        <div className="w-1/3">
+        <div className="w-full">
           <Input
             type="number"
             placeholder="Enter a number"
@@ -360,7 +360,7 @@ function QuestionBody({
       );
     case "PHONE":
       return (
-        <div className="w-1/2">
+        <div className="w-full">
           <Input
             type="tel"
             placeholder="(123) 456-7890"
@@ -389,7 +389,7 @@ function QuestionBody({
       );
     case "LINK":
       return (
-        <div className="w-1/2">
+        <div className="w-full">
           <Input
             type="url"
             placeholder="https://example.com"
diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index addf5a7fc..61b7b8e1c 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -101,7 +101,7 @@ export const miscRouter = {
         amount: z.number(),
         itemization: z.string(),
         importance: z.number(),
-        dateNeeded: z.date(),
+        dateNeeded: z.string(),
         deadlineType: z.string(),
       }),
     })
@@ -112,12 +112,11 @@ export const miscRouter = {
         amount: z.number(),
         itemization: z.string(),
         importance: z.number(),
-        dateNeeded: z.date(),
+        dateNeeded: z.string(),
         deadlineType: z.string(),
       }),
     )
     .mutation(async ({ input }) => {
-      // Helper function to escape HTML and preserve newlines
       const formatText = (text: string | null | undefined): string => {
         if (!text) return "N/A";
         return text
@@ -129,6 +128,16 @@ export const miscRouter = {
           .replace(/\n/g, "<br>");
       };
 
+      // Format date as MM/DD
+      const formatDate = (date: Date | string): string => {
+        const dateObj = typeof date === "string" ? new Date(date) : date;
+        const month = String(dateObj.getMonth() + 1).padStart(2, "0");
+        const day = String(dateObj.getDate()).padStart(2, "0");
+        return `${month}/${day}`;
+      };
+
+      const formattedDate = formatDate(input.dateNeeded);
+
       const htmlContent = `
         <!DOCTYPE html>
         <html lang="en">
@@ -179,11 +188,7 @@ export const miscRouter = {
                             <strong style="color: #1a1a1a; font-size: 14px;">Date Needed:</strong>
                           </td>
                           <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
-                            ${input.dateNeeded.toLocaleDateString("en-US", { 
-                              year: "numeric", 
-                              month: "long", 
-                              day: "numeric" 
-                            })}
+                            ${formattedDate}
                           </td>
                         </tr>
                         <tr>
@@ -205,19 +210,19 @@ export const miscRouter = {
                           </td>
                         </tr>
                         <tr>
-                          <td style="padding-bottom: 8px; vertical-align: top; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Description:</strong>
-                          </td>
-                          <td style="padding-bottom: 8px; padding-top: 8px; border-top: 1px solid #e5e5e5; color: #333333; font-size: 14px; white-space: pre-wrap;">
-                            ${formatText(input.description)}
+                          <td colspan="2" style="padding-bottom: 8px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
+                            <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Description:</strong>
+                            <div style="color: #333333; font-size: 14px; white-space: pre-wrap; text-align: left;">
+                              ${formatText(input.description)}
+                            </div>
                           </td>
                         </tr>
                         <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top; padding-top: 16px;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Itemization:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px; padding-top: 16px; color: #333333; font-size: 14px; white-space: pre-wrap;">
-                            ${formatText(input.itemization)}
+                          <td colspan="2" style="padding-bottom: 16px; padding-top: 16px;">
+                            <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Itemization:</strong>
+                            <div style="color: #333333; font-size: 14px; white-space: pre-wrap; text-align: left;">
+                              ${formatText(input.itemization)}
+                            </div>
                           </td>
                         </tr>
                       </table>
@@ -249,9 +254,10 @@ export const miscRouter = {
 
       await sendEmail({
         to: "treasurer@knighthacks.org",
-        subject: `KHFR - $${input.amount.toLocaleString()} | ${input.dateNeeded.toLocaleDateString()} | ${input.team}`,
+        cc: "exec@knighthacks.org",
+        subject: `KHFR - $${input.amount.toLocaleString()} | ${formattedDate} | ${input.team}`,
         html: htmlContent,
-        from: "funding-requests@knighthacks.org",
+        from: "Funding Requests <funding-requests@knighthacks.org>",
       });
     }),
 } satisfies TRPCRouterRecord;
diff --git a/packages/api/src/utils.ts b/packages/api/src/utils.ts
index 71d336e4c..70a4954ae 100644
--- a/packages/api/src/utils.ts
+++ b/packages/api/src/utils.ts
@@ -201,19 +201,40 @@ export const sendEmail = async ({
   subject,
   html,
   from,
+  cc,
+  bcc,
 }: {
-  to: string;
+  to: string | string[];
   subject: string;
   html: string;
   from?: string;
+  cc?: string | string[];
+  bcc?: string | string[];
 }): Promise<{ success: true; messageId: string }> => {
   try {
-    const { data, error } = await resend.emails.send({
+    const emailPayload: {
+      from: string;
+      to: string | string[];
+      subject: string;
+      html: string;
+      cc?: string | string[];
+      bcc?: string | string[];
+    } = {
       from: from ?? env.RESEND_FROM_EMAIL,
       to,
       subject,
       html,
-    });
+    };
+
+    if (cc) {
+      emailPayload.cc = cc;
+    }
+
+    if (bcc) {
+      emailPayload.bcc = bcc;
+    }
+
+    const { data, error } = await resend.emails.send(emailPayload);
 
     if (error) {
       console.error("Resend error:", error);

From 0fcdee773d75ad488c76fbf9a9d08a89240826f2 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:38:54 -0500
Subject: [PATCH 11/16] styling

---
 packages/api/src/routers/misc.ts | 38 ++++++++++++++------------------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index 61b7b8e1c..e8759ae66 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -138,8 +138,7 @@ export const miscRouter = {
 
       const formattedDate = formatDate(input.dateNeeded);
 
-      const htmlContent = `
-        <!DOCTYPE html>
+      const htmlContent = `<!DOCTYPE html>
         <html lang="en">
         <head>
           <meta charset="UTF-8">
@@ -166,7 +165,7 @@ export const miscRouter = {
                   <!-- Content -->
                   <tr>
                     <td style="padding: 32px 40px;">
-                      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
+                      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0; padding: 0;">
                         <tr>
                           <td style="padding-bottom: 16px; vertical-align: top; width: 140px;">
                             <strong style="color: #1a1a1a; font-size: 14px;">Team:</strong>
@@ -209,23 +208,21 @@ export const miscRouter = {
                             ${input.deadlineType || "N/A"}
                           </td>
                         </tr>
-                        <tr>
-                          <td colspan="2" style="padding-bottom: 8px; padding-top: 8px; border-top: 1px solid #e5e5e5;">
-                            <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Description:</strong>
-                            <div style="color: #333333; font-size: 14px; white-space: pre-wrap; text-align: left;">
-                              ${formatText(input.description)}
-                            </div>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td colspan="2" style="padding-bottom: 16px; padding-top: 16px;">
-                            <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Itemization:</strong>
-                            <div style="color: #333333; font-size: 14px; white-space: pre-wrap; text-align: left;">
-                              ${formatText(input.itemization)}
-                            </div>
-                          </td>
-                        </tr>
                       </table>
+                      
+                      <div style="border-top: 1px solid #e5e5e5; margin-top: 16px; padding-top: 16px;">
+                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Description:</strong>
+                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
+                          ${formatText(input.description)}
+                        </div>
+                      </div>
+                      
+                      <div style="margin-top: 16px; padding-top: 16px;">
+                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Itemization:</strong>
+                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
+                          ${formatText(input.itemization)}
+                        </div>
+                      </div>
                     </td>
                   </tr>
                   
@@ -249,8 +246,7 @@ export const miscRouter = {
             </tr>
           </table>
         </body>
-        </html>
-      `.trim();
+</html>`;
 
       await sendEmail({
         to: "treasurer@knighthacks.org",

From 85bcfd4ec6f5d0031dc525312f2909a970f95ac6 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:39:59 -0500
Subject: [PATCH 12/16] format

---
 .../src/app/admin/forms/[slug]/client.tsx     |  26 +-
 .../_components/ResponseBarChart.tsx          |   4 +-
 .../ResponseHorizontalBarChart.tsx            |   4 +-
 .../_components/ResponsePieChart.tsx          |   4 +-
 .../_components/question-response-card.tsx    |  57 ++-
 apps/blade/src/app/forms/[formName]/page.tsx  |  16 +-
 .../admin/forms/instruction-edit-card.tsx     |  10 +-
 .../admin/forms/question-edit-card.tsx        | 133 +++---
 .../forms/section-manager-dialog.tsx          | 403 +++++++++---------
 packages/api/src/routers/forms.ts             |  16 +-
 packages/api/src/routers/misc.ts              |   4 +-
 packages/api/src/utils.ts                     |   6 +-
 12 files changed, 363 insertions(+), 320 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index 79d8866ec..502c301e2 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -1,6 +1,11 @@
 "use client";
 
 import type { DragEndEvent } from "@dnd-kit/core";
+import type { CSSProperties } from "react";
+import type * as z from "zod";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   closestCenter,
   DndContext,
@@ -18,11 +23,6 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { ArrowLeft, Loader2, Plus, Save, Users } from "lucide-react";
-import { useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import type * as z from "zod";
 
 import type {
   FormType,
@@ -47,12 +47,12 @@ import { Switch } from "@forge/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@forge/ui/tabs";
 import { Textarea } from "@forge/ui/textarea";
 
+import type { MatchingType } from "./linker";
+import type { ProcedureMeta } from "~/lib/utils";
 import { InstructionEditCard } from "~/components/admin/forms/instruction-edit-card";
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
-import type { ProcedureMeta } from "~/lib/utils";
 import { api } from "~/trpc/react";
 import { ConnectionViewer } from "./con-viewer";
-import type { MatchingType } from "./linker";
 import ListMatcher from "./linker";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;
@@ -446,8 +446,7 @@ export function EditorClient({
 
       if (currentIndex === -1) return;
 
-      const newIndex =
-        direction === "up" ? currentIndex - 1 : currentIndex + 1;
+      const newIndex = direction === "up" ? currentIndex - 1 : currentIndex + 1;
 
       if (newIndex < 0 || newIndex >= combined.length) return;
 
@@ -611,10 +610,15 @@ export function EditorClient({
                             checked={isSelected}
                             onCheckedChange={(checked) => {
                               if (checked) {
-                                setResponseRoleIds([...responseRoleIds, role.id]);
+                                setResponseRoleIds([
+                                  ...responseRoleIds,
+                                  role.id,
+                                ]);
                               } else {
                                 setResponseRoleIds(
-                                  responseRoleIds.filter((id) => id !== role.id),
+                                  responseRoleIds.filter(
+                                    (id) => id !== role.id,
+                                  ),
                                 );
                               }
                             }}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
index 70764d2aa..e5cf2da58 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseBarChart.tsx
@@ -73,7 +73,9 @@ export function ResponseBarChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">
+          {question}
+        </CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
index 872d2e1f8..10d7be57f 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponseHorizontalBarChart.tsx
@@ -88,7 +88,9 @@ export function ResponseHorizontalBarChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">
+          {question}
+        </CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
index aa6b4b017..bba25b2a4 100644
--- a/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/responses/_components/ResponsePieChart.tsx
@@ -87,7 +87,9 @@ export function ResponsePieChart({
     <Card>
       <CardHeader className="pb-2 pt-3 md:pb-6 md:pt-6">
         {/* question text as card title */}
-        <CardTitle className="whitespace-pre-line text-sm md:text-lg">{question}</CardTitle>
+        <CardTitle className="whitespace-pre-line text-sm md:text-lg">
+          {question}
+        </CardTitle>
         {/* show total number of responses */}
         <p className="mt-0.5 text-[10px] text-muted-foreground md:mt-1 md:text-sm">
           {responses.length} {responses.length === 1 ? "response" : "responses"}
diff --git a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
index 0ff21d31c..631dc891d 100644
--- a/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
+++ b/apps/blade/src/app/forms/[formName]/_components/question-response-card.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { FileUp, Loader2, X } from "lucide-react";
-import Image from "next/image";
+import type { z } from "zod";
 import * as React from "react";
 import { useRef, useState } from "react";
-import type { z } from "zod";
+import Image from "next/image";
+import { FileUp, Loader2, X } from "lucide-react";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import { getDropdownOptionsFromConst } from "@forge/consts/knight-hacks";
@@ -150,7 +150,7 @@ function QuestionBody({
             onChange={(e) => onChange(e.target.value)}
             disabled={disabled}
             rows={3}
-            className="overflow-y-auto whitespace-pre-wrap 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"
+            className="resize-none overflow-y-auto whitespace-pre-wrap 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"
           />
           <div className="mt-1 flex justify-end">
             <span
@@ -401,11 +401,7 @@ function MultipleChoiceInput({
     <div className="flex flex-col gap-3">
       <RadioGroup
         value={
-          isOtherSelected
-            ? OTHER_VALUE
-            : typeof value === "string"
-              ? value
-              : ""
+          isOtherSelected ? OTHER_VALUE : typeof value === "string" ? value : ""
         }
         onValueChange={handleRadioChange}
         className="flex flex-col gap-3"
@@ -424,10 +420,7 @@ function MultipleChoiceInput({
         ))}
         {allowOther && (
           <div className="flex items-center gap-3">
-            <RadioGroupItem
-              value={OTHER_VALUE}
-              id={`${questionKey}-other`}
-            />
+            <RadioGroupItem value={OTHER_VALUE} id={`${questionKey}-other`} />
             <Label
               htmlFor={`${questionKey}-other`}
               className="cursor-pointer font-normal"
@@ -440,21 +433,21 @@ function MultipleChoiceInput({
       {allowOther &&
         (isOtherSelected ||
           (typeof value === "string" && value === OTHER_VALUE)) && (
-        <div className="ml-7 w-full">
-          <Input
-            placeholder="Please specify"
-            value={otherText}
-            onChange={(e) => handleOtherTextChange(e.target.value)}
-            onBlur={(e) => {
-              const capitalized = capitalizeWords(e.target.value);
-              setOtherText(capitalized);
-              onChange(capitalized || null);
-            }}
-            disabled={disabled}
-            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"
-          />
-        </div>
-      )}
+          <div className="ml-7 w-full">
+            <Input
+              placeholder="Please specify"
+              value={otherText}
+              onChange={(e) => handleOtherTextChange(e.target.value)}
+              onBlur={(e) => {
+                const capitalized = capitalizeWords(e.target.value);
+                setOtherText(capitalized);
+                onChange(capitalized || null);
+              }}
+              disabled={disabled}
+              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"
+            />
+          </div>
+        )}
     </div>
   );
 }
@@ -547,7 +540,9 @@ function CheckboxesInput({
       onChange([...valuesWithoutOther, capitalized]);
     } else {
       onChange(
-        isOtherChecked ? [...valuesWithoutOther, OTHER_VALUE] : valuesWithoutOther,
+        isOtherChecked
+          ? [...valuesWithoutOther, OTHER_VALUE]
+          : valuesWithoutOther,
       );
     }
   };
@@ -577,7 +572,9 @@ function CheckboxesInput({
           <Checkbox
             id={`${questionKey}-other`}
             checked={isOtherChecked}
-            onCheckedChange={(checked) => handleOtherCheckboxChange(checked === true)}
+            onCheckedChange={(checked) =>
+              handleOtherCheckboxChange(checked === true)
+            }
             disabled={disabled}
           />
           <Label
diff --git a/apps/blade/src/app/forms/[formName]/page.tsx b/apps/blade/src/app/forms/[formName]/page.tsx
index 8a870e2fc..7c34f2f38 100644
--- a/apps/blade/src/app/forms/[formName]/page.tsx
+++ b/apps/blade/src/app/forms/[formName]/page.tsx
@@ -1,12 +1,12 @@
 import { redirect } from "next/navigation";
+import { XCircle } from "lucide-react";
 import { stringify } from "superjson";
 
 import { appRouter } from "@forge/api";
 import { log } from "@forge/api/utils";
 import { auth } from "@forge/auth";
-
 import { Card } from "@forge/ui/card";
-import { XCircle } from "lucide-react";
+
 import { SIGN_IN_PATH } from "~/consts";
 import { extractProcedures } from "~/lib/utils";
 import { api, HydrateClient } from "~/trpc/server";
@@ -25,10 +25,10 @@ export default async function FormResponderPage({
   if (!params.formName) {
     return (
       <div className="flex min-h-screen items-center justify-center bg-primary/5 p-6">
-      <Card className="max-w-md p-8 text-center">
-        <XCircle className="mx-auto mb-4 h-16 w-16 text-destructive" />
-        <h1 className="mb-2 text-2xl font-bold">Form not found</h1>
-      </Card>
+        <Card className="max-w-md p-8 text-center">
+          <XCircle className="mx-auto mb-4 h-16 w-16 text-destructive" />
+          <h1 className="mb-2 text-2xl font-bold">Form not found</h1>
+        </Card>
       </div>
     );
   }
@@ -58,7 +58,9 @@ export default async function FormResponderPage({
       <div className="flex min-h-screen items-center justify-center bg-primary/5 p-6">
         <Card className="max-w-md p-8 text-center">
           <XCircle className="mx-auto mb-4 h-16 w-16 text-destructive" />
-          <h1 className="mb-2 text-2xl font-bold">You do not have permission to respond to this form</h1>
+          <h1 className="mb-2 text-2xl font-bold">
+            You do not have permission to respond to this form
+          </h1>
         </Card>
       </div>
     );
diff --git a/apps/blade/src/components/admin/forms/instruction-edit-card.tsx b/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
index 8dfe6dbc3..aa8978faa 100644
--- a/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
+++ b/apps/blade/src/components/admin/forms/instruction-edit-card.tsx
@@ -1,6 +1,9 @@
 "use client";
 
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
+import type { z } from "zod";
+import { useRef, useState } from "react";
+import Image from "next/image";
 import {
   ArrowDown,
   ArrowUp,
@@ -12,9 +15,6 @@ import {
   Video,
   X,
 } from "lucide-react";
-import Image from "next/image";
-import { useRef, useState } from "react";
-import type { z } from "zod";
 
 import type { InstructionValidator } from "@forge/consts/knight-hacks";
 import { cn } from "@forge/ui";
@@ -317,7 +317,7 @@ export function InstructionEditCard({
                 onMoveUp?.();
               }}
               disabled={!canMoveUp}
-              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
               aria-label="Move up"
             >
               <ArrowUp className="h-5 w-5" />
@@ -329,7 +329,7 @@ export function InstructionEditCard({
                 onMoveDown?.();
               }}
               disabled={!canMoveDown}
-              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
               aria-label="Move down"
             >
               <ArrowDown className="h-5 w-5" />
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 a2f95289d..feb70bc21 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,8 @@
 "use client";
 
 import type { DraggableSyntheticListeners } from "@dnd-kit/core";
+import type { z } from "zod";
+import * as React from "react";
 import {
   AlignLeft,
   ArrowDown,
@@ -24,8 +26,6 @@ import {
   Trash,
   X,
 } from "lucide-react";
-import * as React from "react";
-import type { z } from "zod";
 
 import type { QuestionValidator } from "@forge/consts/knight-hacks";
 import {
@@ -231,7 +231,7 @@ export function QuestionEditCard({
                 onMoveUp?.();
               }}
               disabled={!canMoveUp}
-              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
               aria-label="Move up"
             >
               <ArrowUp className="h-5 w-5" />
@@ -243,7 +243,7 @@ export function QuestionEditCard({
                 onMoveDown?.();
               }}
               disabled={!canMoveDown}
-              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
+              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
               aria-label="Move down"
             >
               <ArrowDown className="h-5 w-5" />
@@ -495,8 +495,7 @@ function OptionList({
   const availableConstants = Object.entries(AVAILABLE_DROPDOWN_CONSTANTS).map(
     ([key, label]) => {
       const constOptions = getDropdownOptionsFromConst(key);
-      const isDisabled =
-        isRestrictedType && constOptions.length >= 15;
+      const isDisabled = isRestrictedType && constOptions.length >= 15;
       return { key, label, isDisabled, length: constOptions.length };
     },
   );
@@ -522,84 +521,94 @@ function OptionList({
                   key={key}
                   value={key}
                   disabled={isDisabled}
-                  className={isDisabled ? "opacity-50 cursor-not-allowed" : ""}
+                  className={isDisabled ? "cursor-not-allowed opacity-50" : ""}
                 >
                   {label}
-                  {isDisabled && " (too long for this question type, max 15 options) Use Dropdown instead"}
+                  {isDisabled &&
+                    " (too long for this question type, max 15 options) Use Dropdown instead"}
                 </SelectItem>
               ))}
             </SelectContent>
           </Select>
           {isUsingConst && (
             <p className="text-xs text-muted-foreground">
-              Using constant: {AVAILABLE_DROPDOWN_CONSTANTS[optionsConst as keyof typeof AVAILABLE_DROPDOWN_CONSTANTS]}
+              Using constant:{" "}
+              {
+                AVAILABLE_DROPDOWN_CONSTANTS[
+                  optionsConst as keyof typeof AVAILABLE_DROPDOWN_CONSTANTS
+                ]
+              }
             </p>
           )}
         </div>
       )}
 
-      {!isUsingConst && 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={optionValue}
-            onChange={(e) => handleOptionChange(idx, e.target.value)}
-            onPaste={(e) => handlePaste(e, idx)}
-            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" && optionValue === "") {
-                e.preventDefault();
-                removeOption(idx);
-              }
-            }}
-            autoFocus={idx === options.length - 1 && options.length > 1}
-          />
+      {!isUsingConst &&
+        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={optionValue}
+              onChange={(e) => handleOptionChange(idx, e.target.value)}
+              onPaste={(e) => handlePaste(e, idx)}
+              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" && optionValue === "") {
+                  e.preventDefault();
+                  removeOption(idx);
+                }
+              }}
+              autoFocus={idx === options.length - 1 && options.length > 1}
+            />
 
-          <Button
-            variant="ghost"
-            size="icon"
-            className="opacity-0 transition-opacity group-hover:opacity-100"
-            onClick={() => removeOption(idx)}
-            tabIndex={-1}
-          >
-            <X className="h-5 w-5 text-gray-500" />
-          </Button>
-        </div>
-      ))}
+            <Button
+              variant="ghost"
+              size="icon"
+              className="opacity-0 transition-opacity group-hover:opacity-100"
+              onClick={() => removeOption(idx)}
+              tabIndex={-1}
+            >
+              <X className="h-5 w-5 text-gray-500" />
+            </Button>
+          </div>
+        ))}
 
       {/* Add Option Button - Only show when not using a constant */}
       {!isUsingConst && (
-      <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="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 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>
       )}
 
       {/* Allow Other Option Toggle - Only for MULTIPLE_CHOICE and CHECKBOXES */}
-      {(question.type === "MULTIPLE_CHOICE" || question.type === "CHECKBOXES") && (
+      {(question.type === "MULTIPLE_CHOICE" ||
+        question.type === "CHECKBOXES") && (
         <div className="mt-3 flex items-center gap-2 border-t pt-3">
           <Checkbox
             checked={allowOther}
diff --git a/apps/blade/src/components/forms/section-manager-dialog.tsx b/apps/blade/src/components/forms/section-manager-dialog.tsx
index d9670ef13..14fba8c5d 100644
--- a/apps/blade/src/components/forms/section-manager-dialog.tsx
+++ b/apps/blade/src/components/forms/section-manager-dialog.tsx
@@ -1,7 +1,15 @@
 "use client";
 
-import { ArrowDown, ArrowUp, Pencil, Plus, Trash2, Users, X } from "lucide-react";
 import { useEffect, useState } from "react";
+import {
+  ArrowDown,
+  ArrowUp,
+  Pencil,
+  Plus,
+  Trash2,
+  Users,
+  X,
+} from "lucide-react";
 import * as z from "zod";
 
 import { Button } from "@forge/ui/button";
@@ -77,7 +85,7 @@ export function SectionManagerDialog({
 
     const fetchSectionRoles = async () => {
       const newRolesMap = new Map<string, { id: string; name: string }[]>();
-      
+
       await Promise.all(
         sections
           .filter((s) => s !== "General")
@@ -370,217 +378,232 @@ export function SectionManagerDialog({
             const canMoveDown = index < sections.length - 1;
 
             return (
-              <div
-                key={section}
-                className="space-y-2 rounded-md border p-3"
-              >
+              <div key={section} className="space-y-2 rounded-md border p-3">
                 {editingSection === section ? (
-                <Form {...renameForm}>
-                  <form
-                    onSubmit={renameForm.handleSubmit(() =>
-                      handleRename(section),
-                    )}
-                    className="flex flex-1 items-center gap-2"
-                  >
-                    <FormField
-                      control={renameForm.control}
-                      name="name"
-                      render={({ field }) => (
-                        <FormItem className="flex-1">
-                          <FormControl>
-                            <Input
-                              {...field}
-                              placeholder="Section name"
-                              autoFocus
-                            />
-                          </FormControl>
-                        </FormItem>
-                      )}
-                    />
-                    <Button type="submit" size="sm">
-                      Save
-                    </Button>
-                    <Button
-                      type="button"
-                      size="sm"
-                      variant="ghost"
-                      onClick={() => {
-                        setEditingSection(null);
-                        renameForm.reset();
-                      }}
-                    >
-                      <X className="h-4 w-4" />
-                    </Button>
-                  </form>
-                </Form>
-              ) : isEditingRoles ? (
-                <div className="space-y-3">
-                  <Form {...editRolesForm}>
+                  <Form {...renameForm}>
                     <form
-                      onSubmit={editRolesForm.handleSubmit((values) => {
-                        updateSectionRoles.mutate({
-                          sectionName: section,
-                          roleIds: values.roleIds,
-                        } as { sectionName: string; roleIds: string[] });
-                      })}
-                      className="space-y-3"
+                      onSubmit={renameForm.handleSubmit(() =>
+                        handleRename(section),
+                      )}
+                      className="flex flex-1 items-center gap-2"
                     >
                       <FormField
-                        control={editRolesForm.control}
-                        name="roleIds"
-                        render={() => (
-                          <FormItem>
-                            <div className="mb-2">
-                              <FormLabel>Restrict to Roles (Optional)</FormLabel>
-                              <FormDescription>
-                                Select one or more roles that can access this
-                                section. Leave empty to allow all users with form
-                                access.
-                              </FormDescription>
-                            </div>
-                            <div className="max-h-60 space-y-3 overflow-y-auto rounded-md border p-3">
-                              {allRoles.map((role) => (
-                                <FormField
-                                  key={role.id}
-                                  control={editRolesForm.control}
-                                  name="roleIds"
-                                  render={({ field }) => {
-                                    return (
-                                      <FormItem
-                                        key={role.id}
-                                        className="flex flex-row items-start space-x-3 space-y-0"
-                                      >
-                                        <FormControl>
-                                          <Checkbox
-                                            checked={field.value?.includes(role.id)}
-                                            onCheckedChange={(checked) => {
-                                              return checked
-                                                ? field.onChange([
-                                                    ...(field.value ?? []),
-                                                    role.id,
-                                                  ])
-                                                : field.onChange(
-                                                    field.value?.filter(
-                                                      (value) => value !== role.id,
-                                                    ) ?? [],
-                                                  );
-                                            }}
-                                          />
-                                        </FormControl>
-                                        <FormLabel className="cursor-pointer font-normal">
-                                          {role.name}
-                                        </FormLabel>
-                                      </FormItem>
-                                    );
-                                  }}
-                                />
-                              ))}
-                            </div>
+                        control={renameForm.control}
+                        name="name"
+                        render={({ field }) => (
+                          <FormItem className="flex-1">
+                            <FormControl>
+                              <Input
+                                {...field}
+                                placeholder="Section name"
+                                autoFocus
+                              />
+                            </FormControl>
                           </FormItem>
                         )}
                       />
-                      <div className="flex gap-2">
-                        <Button type="submit" size="sm">
-                          Save
-                        </Button>
-                        <Button
-                          type="button"
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => {
-                            setEditingRolesFor(null);
-                            editRolesForm.reset();
-                          }}
-                        >
-                          <X className="h-4 w-4" />
-                        </Button>
-                      </div>
+                      <Button type="submit" size="sm">
+                        Save
+                      </Button>
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => {
+                          setEditingSection(null);
+                          renameForm.reset();
+                        }}
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
                     </form>
                   </Form>
-                </div>
-              ) : (
-                <>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-1 items-center gap-2">
-                      <div className="flex flex-col gap-1">
-                        <span className="font-medium">{section}</span>
-                        <span className="text-sm text-muted-foreground">
-                          {countMap.get(section) ?? 0}{" "}
-                          {countMap.get(section) === 1 ? "form" : "forms"}
-                        </span>
-                        {section !== "General" && sectionRoles.length > 0 && (
-                          <span className="text-xs text-muted-foreground">
-                            Roles: {sectionRoles.map((r) => r.name).join(", ")}
+                ) : isEditingRoles ? (
+                  <div className="space-y-3">
+                    <Form {...editRolesForm}>
+                      <form
+                        onSubmit={editRolesForm.handleSubmit((values) => {
+                          updateSectionRoles.mutate({
+                            sectionName: section,
+                            roleIds: values.roleIds,
+                          } as { sectionName: string; roleIds: string[] });
+                        })}
+                        className="space-y-3"
+                      >
+                        <FormField
+                          control={editRolesForm.control}
+                          name="roleIds"
+                          render={() => (
+                            <FormItem>
+                              <div className="mb-2">
+                                <FormLabel>
+                                  Restrict to Roles (Optional)
+                                </FormLabel>
+                                <FormDescription>
+                                  Select one or more roles that can access this
+                                  section. Leave empty to allow all users with
+                                  form access.
+                                </FormDescription>
+                              </div>
+                              <div className="max-h-60 space-y-3 overflow-y-auto rounded-md border p-3">
+                                {allRoles.map((role) => (
+                                  <FormField
+                                    key={role.id}
+                                    control={editRolesForm.control}
+                                    name="roleIds"
+                                    render={({ field }) => {
+                                      return (
+                                        <FormItem
+                                          key={role.id}
+                                          className="flex flex-row items-start space-x-3 space-y-0"
+                                        >
+                                          <FormControl>
+                                            <Checkbox
+                                              checked={field.value?.includes(
+                                                role.id,
+                                              )}
+                                              onCheckedChange={(checked) => {
+                                                return checked
+                                                  ? field.onChange([
+                                                      ...(field.value ?? []),
+                                                      role.id,
+                                                    ])
+                                                  : field.onChange(
+                                                      field.value?.filter(
+                                                        (value) =>
+                                                          value !== role.id,
+                                                      ) ?? [],
+                                                    );
+                                              }}
+                                            />
+                                          </FormControl>
+                                          <FormLabel className="cursor-pointer font-normal">
+                                            {role.name}
+                                          </FormLabel>
+                                        </FormItem>
+                                      );
+                                    }}
+                                  />
+                                ))}
+                              </div>
+                            </FormItem>
+                          )}
+                        />
+                        <div className="flex gap-2">
+                          <Button type="submit" size="sm">
+                            Save
+                          </Button>
+                          <Button
+                            type="button"
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => {
+                              setEditingRolesFor(null);
+                              editRolesForm.reset();
+                            }}
+                          >
+                            <X className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      </form>
+                    </Form>
+                  </div>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <div className="flex flex-1 items-center gap-2">
+                        <div className="flex flex-col gap-1">
+                          <span className="font-medium">{section}</span>
+                          <span className="text-sm text-muted-foreground">
+                            {countMap.get(section) ?? 0}{" "}
+                            {countMap.get(section) === 1 ? "form" : "forms"}
                           </span>
-                        )}
-                        {section !== "General" &&
-                          sectionRoles.length === 0 && (
+                          {section !== "General" && sectionRoles.length > 0 && (
                             <span className="text-xs text-muted-foreground">
-                              All users with form access
+                              Roles:{" "}
+                              {sectionRoles.map((r) => r.name).join(", ")}
                             </span>
                           )}
+                          {section !== "General" &&
+                            sectionRoles.length === 0 && (
+                              <span className="text-xs text-muted-foreground">
+                                All users with form access
+                              </span>
+                            )}
+                        </div>
                       </div>
-                    </div>
-                    <div className="flex gap-2">
-                      {section !== "General" && (
-                        <>
-                          <button
-                            type="button"
-                            onClick={() => reorderSection.mutate({ sectionName: section, direction: "up" })}
-                            disabled={!canMoveUp}
-                            className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
-                            aria-label="Move up"
-                          >
-                            <ArrowUp className="h-4 w-4" />
-                          </button>
-                          <button
-                            type="button"
-                            onClick={() => reorderSection.mutate({ sectionName: section, direction: "down" })}
-                            disabled={!canMoveDown}
-                            className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:opacity-30 disabled:cursor-not-allowed"
-                            aria-label="Move down"
+                      <div className="flex gap-2">
+                        {section !== "General" && (
+                          <>
+                            <button
+                              type="button"
+                              onClick={() =>
+                                reorderSection.mutate({
+                                  sectionName: section,
+                                  direction: "up",
+                                })
+                              }
+                              disabled={!canMoveUp}
+                              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
+                              aria-label="Move up"
+                            >
+                              <ArrowUp className="h-4 w-4" />
+                            </button>
+                            <button
+                              type="button"
+                              onClick={() =>
+                                reorderSection.mutate({
+                                  sectionName: section,
+                                  direction: "down",
+                                })
+                              }
+                              disabled={!canMoveDown}
+                              className="rounded p-1 text-gray-300 hover:text-gray-500 disabled:cursor-not-allowed disabled:opacity-30"
+                              aria-label="Move down"
+                            >
+                              <ArrowDown className="h-4 w-4" />
+                            </button>
+                          </>
+                        )}
+                        {section !== "General" && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => {
+                              setEditingRolesFor(section);
+                              const currentRoleIds = sectionRoles.map(
+                                (r) => r.id,
+                              );
+                              editRolesForm.setValue("roleIds", currentRoleIds);
+                            }}
+                            title="Edit roles"
                           >
-                            <ArrowDown className="h-4 w-4" />
-                          </button>
-                        </>
-                      )}
-                      {section !== "General" && (
+                            <Users className="h-4 w-4" />
+                          </Button>
+                        )}
                         <Button
                           variant="ghost"
                           size="sm"
                           onClick={() => {
-                            setEditingRolesFor(section);
-                            const currentRoleIds = sectionRoles.map((r) => r.id);
-                            editRolesForm.setValue("roleIds", currentRoleIds);
+                            setEditingSection(section);
+                            renameForm.setValue("name", section);
                           }}
-                          title="Edit roles"
                         >
-                          <Users className="h-4 w-4" />
+                          <Pencil className="h-4 w-4" />
                         </Button>
-                      )}
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => {
-                          setEditingSection(section);
-                          renameForm.setValue("name", section);
-                        }}
-                      >
-                        <Pencil className="h-4 w-4" />
-                      </Button>
-                      {section !== "General" && (
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleDelete(section)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      )}
+                        {section !== "General" && (
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={() => handleDelete(section)}
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </Button>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                </>
-              )}
+                  </>
+                )}
               </div>
             );
           })}
diff --git a/packages/api/src/routers/forms.ts b/packages/api/src/routers/forms.ts
index 30dc85183..ccac6f8df 100644
--- a/packages/api/src/routers/forms.ts
+++ b/packages/api/src/routers/forms.ts
@@ -1,6 +1,6 @@
+import type { JSONSchema7 } from "json-schema";
 import { TRPCError } from "@trpc/server";
 import { and, count, desc, eq, inArray, lt, sql } from "drizzle-orm";
-import type { JSONSchema7 } from "json-schema";
 import jsonSchemaToZod from "json-schema-to-zod";
 import * as z from "zod";
 
@@ -783,10 +783,10 @@ export const formsRouter = {
     const sortedSections = Array.from(allSections).sort((a, b) => {
       if (a === "General") return -1;
       if (b === "General") return 1;
-      
+
       let aOrder = 999;
       let bOrder = 999;
-      
+
       for (const section of allDbSections) {
         if (section.name === a) {
           aOrder = section.order;
@@ -795,10 +795,10 @@ export const formsRouter = {
           bOrder = section.order;
         }
       }
-      
+
       return aOrder - bOrder;
     });
-    
+
     return sortedSections;
   }),
 
@@ -950,9 +950,11 @@ export const formsRouter = {
       }
 
       const maxOrderResult = await db
-        .select({ maxOrder: sql<number>`COALESCE(MAX(${FormSections.order}), 0)` })
+        .select({
+          maxOrder: sql<number>`COALESCE(MAX(${FormSections.order}), 0)`,
+        })
         .from(FormSections);
-      
+
       const maxOrder = maxOrderResult[0]?.maxOrder ?? 0;
 
       const [newSection] = await db
diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index e8759ae66..0e9780d54 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -92,7 +92,7 @@ export const miscRouter = {
       });
     }),
 
-    fundingRequest: protectedProcedure
+  fundingRequest: protectedProcedure
     .meta({
       id: "fundingRequest",
       inputSchema: z.object({
@@ -236,7 +236,7 @@ export const miscRouter = {
                           day: "numeric",
                           hour: "numeric",
                           minute: "2-digit",
-                          hour12: true
+                          hour12: true,
                         })}
                       </p>
                     </td>
diff --git a/packages/api/src/utils.ts b/packages/api/src/utils.ts
index 70a4954ae..b30c083ec 100644
--- a/packages/api/src/utils.ts
+++ b/packages/api/src/utils.ts
@@ -1,10 +1,10 @@
+import type { APIGuildMember } from "discord-api-types/v10";
+import type { JSONSchema7 } from "json-schema";
+import { cookies } from "next/headers";
 import { REST } from "@discordjs/rest";
 import { TRPCError } from "@trpc/server";
-import type { APIGuildMember } from "discord-api-types/v10";
 import { Routes } from "discord-api-types/v10";
 import { and, eq, gt, inArray } from "drizzle-orm";
-import type { JSONSchema7 } from "json-schema";
-import { cookies } from "next/headers";
 import { Resend } from "resend";
 import Stripe from "stripe";
 

From 4a02f21e3b1c857b72617c6094b696a2dbede4c9 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:40:50 -0500
Subject: [PATCH 13/16] format

---
 apps/blade/src/app/admin/forms/[slug]/client.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index 502c301e2..91e4c81c8 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -1,11 +1,6 @@
 "use client";
 
 import type { DragEndEvent } from "@dnd-kit/core";
-import type { CSSProperties } from "react";
-import type * as z from "zod";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
 import {
   closestCenter,
   DndContext,
@@ -23,6 +18,11 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { ArrowLeft, Loader2, Plus, Save, Users } from "lucide-react";
+import { useRouter } from "next/navigation";
+import type { CSSProperties } from "react";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import type * as z from "zod";
 
 import type {
   FormType,
@@ -47,12 +47,12 @@ import { Switch } from "@forge/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@forge/ui/tabs";
 import { Textarea } from "@forge/ui/textarea";
 
-import type { MatchingType } from "./linker";
-import type { ProcedureMeta } from "~/lib/utils";
 import { InstructionEditCard } from "~/components/admin/forms/instruction-edit-card";
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
+import type { ProcedureMeta } from "~/lib/utils";
 import { api } from "~/trpc/react";
 import { ConnectionViewer } from "./con-viewer";
+import type { MatchingType } from "./linker";
 import ListMatcher from "./linker";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;

From 0f1f6c4ea90d24803382f75ceab261fbe8ee995a Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 12:51:29 -0500
Subject: [PATCH 14/16] format

---
 apps/blade/src/app/admin/forms/[slug]/client.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/blade/src/app/admin/forms/[slug]/client.tsx b/apps/blade/src/app/admin/forms/[slug]/client.tsx
index 91e4c81c8..502c301e2 100644
--- a/apps/blade/src/app/admin/forms/[slug]/client.tsx
+++ b/apps/blade/src/app/admin/forms/[slug]/client.tsx
@@ -1,6 +1,11 @@
 "use client";
 
 import type { DragEndEvent } from "@dnd-kit/core";
+import type { CSSProperties } from "react";
+import type * as z from "zod";
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
 import {
   closestCenter,
   DndContext,
@@ -18,11 +23,6 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { ArrowLeft, Loader2, Plus, Save, Users } from "lucide-react";
-import { useRouter } from "next/navigation";
-import type { CSSProperties } from "react";
-import * as React from "react";
-import { useEffect, useState } from "react";
-import type * as z from "zod";
 
 import type {
   FormType,
@@ -47,12 +47,12 @@ import { Switch } from "@forge/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@forge/ui/tabs";
 import { Textarea } from "@forge/ui/textarea";
 
+import type { MatchingType } from "./linker";
+import type { ProcedureMeta } from "~/lib/utils";
 import { InstructionEditCard } from "~/components/admin/forms/instruction-edit-card";
 import { QuestionEditCard } from "~/components/admin/forms/question-edit-card";
-import type { ProcedureMeta } from "~/lib/utils";
 import { api } from "~/trpc/react";
 import { ConnectionViewer } from "./con-viewer";
-import type { MatchingType } from "./linker";
 import ListMatcher from "./linker";
 
 type FormQuestion = z.infer<typeof QuestionValidator>;

From f7a08ff75befc3df8979ff2b5003cb2f83aac6b2 Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 13:14:07 -0500
Subject: [PATCH 15/16] review

---
 packages/api/src/routers/misc.ts    | 139 ++------------------------
 packages/consts/src/knight-hacks.ts | 145 ++++++++++++++++++++++++++++
 2 files changed, 153 insertions(+), 131 deletions(-)

diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index 0e9780d54..912c8ec04 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -2,7 +2,11 @@ import type { TRPCRouterRecord } from "@trpc/server";
 import { Routes } from "discord-api-types/v10";
 import { z } from "zod";
 
-import { RECRUITING_CHANNEL, TEAM_MAP } from "@forge/consts/knight-hacks";
+import {
+  RECRUITING_CHANNEL,
+  TEAM_MAP,
+  generateFundingRequestEmailHtml,
+} from "@forge/consts/knight-hacks";
 
 import { protectedProcedure } from "../trpc";
 import { discord, sendEmail } from "../utils";
@@ -117,136 +121,9 @@ export const miscRouter = {
       }),
     )
     .mutation(async ({ input }) => {
-      const formatText = (text: string | null | undefined): string => {
-        if (!text) return "N/A";
-        return text
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/"/g, "&quot;")
-          .replace(/'/g, "&#039;")
-          .replace(/\n/g, "<br>");
-      };
-
-      // Format date as MM/DD
-      const formatDate = (date: Date | string): string => {
-        const dateObj = typeof date === "string" ? new Date(date) : date;
-        const month = String(dateObj.getMonth() + 1).padStart(2, "0");
-        const day = String(dateObj.getDate()).padStart(2, "0");
-        return `${month}/${day}`;
-      };
-
-      const formattedDate = formatDate(input.dateNeeded);
-
-      const htmlContent = `<!DOCTYPE html>
-        <html lang="en">
-        <head>
-          <meta charset="UTF-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1.0">
-          <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        </head>
-        <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5; line-height: 1.6; color: #333333;">
-          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 20px 0;">
-            <tr>
-              <td align="center">
-                <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 600px;">
-                  <!-- Header -->
-                  <tr>
-                    <td style="padding: 32px 40px 24px 40px; border-bottom: 1px solid #e5e5e5;">
-                      <h1 style="margin: 0; font-size: 24px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.5px;">
-                        Funding Request
-                      </h1>
-                      <p style="margin: 8px 0 0 0; font-size: 14px; color: #666666;">
-                        A new funding request has been submitted for the <strong style="color: #1a1a1a;">${input.team}</strong> team
-                      </p>
-                    </td>
-                  </tr>
-                  
-                  <!-- Content -->
-                  <tr>
-                    <td style="padding: 32px 40px;">
-                      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0; padding: 0;">
-                        <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top; width: 140px;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Team:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
-                            ${input.team}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Amount:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px; color: #059669; font-size: 16px; font-weight: 600;">
-                            $${input.amount.toLocaleString()}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Date Needed:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
-                            ${formattedDate}
-                          </td>
-                        </tr>
-                        <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Importance:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px;">
-                            <span style="display: inline-block; background-color: #eff6ff; color: #1e40af; padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: 500;">
-                              ${input.importance}/10
-                            </span>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td style="padding-bottom: 16px; vertical-align: top;">
-                            <strong style="color: #1a1a1a; font-size: 14px;">Deadline Type:</strong>
-                          </td>
-                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
-                            ${input.deadlineType || "N/A"}
-                          </td>
-                        </tr>
-                      </table>
-                      
-                      <div style="border-top: 1px solid #e5e5e5; margin-top: 16px; padding-top: 16px;">
-                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Description:</strong>
-                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
-                          ${formatText(input.description)}
-                        </div>
-                      </div>
-                      
-                      <div style="margin-top: 16px; padding-top: 16px;">
-                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Itemization:</strong>
-                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
-                          ${formatText(input.itemization)}
-                        </div>
-                      </div>
-                    </td>
-                  </tr>
-                  
-                  <!-- Footer -->
-                  <tr>
-                    <td style="padding: 24px 40px; background-color: #f9fafb; border-top: 1px solid #e5e5e5; border-radius: 0 0 8px 8px;">
-                      <p style="margin: 0; font-size: 12px; color: #999999; text-align: center;">
-                        Submitted at ${new Date().toLocaleString("en-US", {
-                          year: "numeric",
-                          month: "long",
-                          day: "numeric",
-                          hour: "numeric",
-                          minute: "2-digit",
-                          hour12: true,
-                        })}
-                      </p>
-                    </td>
-                  </tr>
-                </table>
-              </td>
-            </tr>
-          </table>
-        </body>
-</html>`;
+      const dateObj = typeof input.dateNeeded === "string" ? new Date(input.dateNeeded) : input.dateNeeded;
+      const formattedDate = `${String(dateObj.getMonth() + 1).padStart(2, "0")}/${String(dateObj.getDate()).padStart(2, "0")}`;
+      const htmlContent = generateFundingRequestEmailHtml(input);
 
       await sendEmail({
         to: "treasurer@knighthacks.org",
diff --git a/packages/consts/src/knight-hacks.ts b/packages/consts/src/knight-hacks.ts
index e412debd7..d0528a689 100644
--- a/packages/consts/src/knight-hacks.ts
+++ b/packages/consts/src/knight-hacks.ts
@@ -6857,6 +6857,151 @@ export function getDropdownOptionsFromConst(
   }
 }
 
+export interface FundingRequestInput {
+  team: string;
+  description: string;
+  amount: number;
+  itemization: string;
+  importance: number;
+  dateNeeded: string;
+  deadlineType: string;
+}
+
+export function generateFundingRequestEmailHtml(
+  input: FundingRequestInput,
+): string {
+  const formatText = (text: string | null | undefined): string => {
+    if (!text) return "N/A";
+    return text
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;")
+      .replace(/\n/g, "<br>");
+  };
+
+  // Format date as MM/DD
+  const formatDate = (date: Date | string): string => {
+    const dateObj = typeof date === "string" ? new Date(date) : date;
+    const month = String(dateObj.getMonth() + 1).padStart(2, "0");
+    const day = String(dateObj.getDate()).padStart(2, "0");
+    return `${month}/${day}`;
+  };
+
+  const formattedDate = formatDate(input.dateNeeded);
+
+  return `<!DOCTYPE html>
+        <html lang="en">
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        </head>
+        <body style="margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background-color: #f5f5f5; line-height: 1.6; color: #333333;">
+          <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="background-color: #f5f5f5; padding: 20px 0;">
+            <tr>
+              <td align="center">
+                <table role="presentation" width="600" cellpadding="0" cellspacing="0" border="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); max-width: 600px;">
+                  <!-- Header -->
+                  <tr>
+                    <td style="padding: 32px 40px 24px 40px; border-bottom: 1px solid #e5e5e5;">
+                      <h1 style="margin: 0; font-size: 24px; font-weight: 600; color: #1a1a1a; letter-spacing: -0.5px;">
+                        Funding Request
+                      </h1>
+                      <p style="margin: 8px 0 0 0; font-size: 14px; color: #666666;">
+                        A new funding request has been submitted for the <strong style="color: #1a1a1a;">${input.team}</strong> team
+                      </p>
+                    </td>
+                  </tr>
+                  
+                  <!-- Content -->
+                  <tr>
+                    <td style="padding: 32px 40px;">
+                      <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin: 0; padding: 0;">
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top; width: 140px;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Team:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${input.team}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Amount:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #059669; font-size: 16px; font-weight: 600;">
+                            $${input.amount.toLocaleString()}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Date Needed:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${formattedDate}
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Importance:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px;">
+                            <span style="display: inline-block; background-color: #eff6ff; color: #1e40af; padding: 4px 12px; border-radius: 4px; font-size: 14px; font-weight: 500;">
+                              ${input.importance}/10
+                            </span>
+                          </td>
+                        </tr>
+                        <tr>
+                          <td style="padding-bottom: 16px; vertical-align: top;">
+                            <strong style="color: #1a1a1a; font-size: 14px;">Deadline Type:</strong>
+                          </td>
+                          <td style="padding-bottom: 16px; color: #333333; font-size: 14px;">
+                            ${input.deadlineType || "N/A"}
+                          </td>
+                        </tr>
+                      </table>
+                      
+                      <div style="border-top: 1px solid #e5e5e5; margin-top: 16px; padding-top: 16px;">
+                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Description:</strong>
+                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
+                          ${formatText(input.description)}
+                        </div>
+                      </div>
+                      
+                      <div style="margin-top: 16px; padding-top: 16px;">
+                        <strong style="color: #1a1a1a; font-size: 14px; display: block; margin-bottom: 8px;">Itemization:</strong>
+                        <div style="color: #333333; font-size: 14px; white-space: pre-wrap; margin: 0; padding: 0;">
+                          ${formatText(input.itemization)}
+                        </div>
+                      </div>
+                    </td>
+                  </tr>
+                  
+                  <!-- Footer -->
+                  <tr>
+                    <td style="padding: 24px 40px; background-color: #f9fafb; border-top: 1px solid #e5e5e5; border-radius: 0 0 8px 8px;">
+                      <p style="margin: 0; font-size: 12px; color: #999999; text-align: center;">
+                        Submitted at ${new Date().toLocaleString("en-US", {
+                          year: "numeric",
+                          month: "long",
+                          day: "numeric",
+                          hour: "numeric",
+                          minute: "2-digit",
+                          hour12: true,
+                        })}
+                      </p>
+                    </td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </body>
+</html>`;
+}
+
 export const FORM_QUESTION_TYPES = [
   { value: "SHORT_ANSWER", label: "Short answer" },
   { value: "PARAGRAPH", label: "Paragraph" },

From 765cb4adc0c39ccd2694fb3ff8d093cffbd604be Mon Sep 17 00:00:00 2001
From: Dylan Vidal <dylanvidal1204@gmail.com>
Date: Sun, 18 Jan 2026 13:14:29 -0500
Subject: [PATCH 16/16] format...

---
 packages/api/src/routers/misc.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/api/src/routers/misc.ts b/packages/api/src/routers/misc.ts
index 912c8ec04..13b864cea 100644
--- a/packages/api/src/routers/misc.ts
+++ b/packages/api/src/routers/misc.ts
@@ -3,9 +3,9 @@ import { Routes } from "discord-api-types/v10";
 import { z } from "zod";
 
 import {
+  generateFundingRequestEmailHtml,
   RECRUITING_CHANNEL,
   TEAM_MAP,
-  generateFundingRequestEmailHtml,
 } from "@forge/consts/knight-hacks";
 
 import { protectedProcedure } from "../trpc";
@@ -121,7 +121,10 @@ export const miscRouter = {
       }),
     )
     .mutation(async ({ input }) => {
-      const dateObj = typeof input.dateNeeded === "string" ? new Date(input.dateNeeded) : input.dateNeeded;
+      const dateObj =
+        typeof input.dateNeeded === "string"
+          ? new Date(input.dateNeeded)
+          : input.dateNeeded;
       const formattedDate = `${String(dateObj.getMonth() + 1).padStart(2, "0")}/${String(dateObj.getDate()).padStart(2, "0")}`;
       const htmlContent = generateFundingRequestEmailHtml(input);