From 485ddcdc61775f9f606664c8b2d4268577a986b4 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Apr 2026 01:56:05 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/documents.pleading.new.tsx | 117 ++++++++++++++++++++------
 1 file changed, 91 insertions(+), 26 deletions(-)

diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index 1156e11..8daf654 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -12,11 +12,12 @@ import {
 } from "@/components/ui/select";
 import { FL_CIRCUITS } from "@/lib/florida";
 import { Packer } from "docx";
-import { buildPleadingDoc, downloadPleading } from "@/lib/docx-pleading";
+import { buildPleadingDoc, downloadPleading, type PleadingFootnote } from "@/lib/docx-pleading";
+import { RichTextEditor } from "@/components/documents/rich-text-editor";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
 import { toast } from "sonner";
-import { Download, Save, Loader2 } from "lucide-react";
+import { Download, Save, Loader2, Plus, Trash2 } from "lucide-react";
 
 export const Route = createFileRoute("/documents/pleading/new")({
   component: PleadingNewPage,
@@ -32,7 +33,8 @@ function PleadingNewPage() {
   const [defendants, setDefendants] = useState("");
   const [caseNumber, setCaseNumber] = useState("");
   const [title, setTitle] = useState("");
-  const [body, setBody] = useState("");
+  const [bodyHtml, setBodyHtml] = useState("<p></p>");
+  const [footnotes, setFootnotes] = useState<PleadingFootnote[]>([]);
   const [docName, setDocName] = useState("Pleading");
   const [saving, setSaving] = useState(false);
 
@@ -41,7 +43,6 @@ function PleadingNewPage() {
     return c?.counties ?? [];
   }, [circuit]);
 
-  // Reset county when circuit changes if current county isn't valid
   const handleCircuitChange = (v: string) => {
     setCircuit(v);
     const c = FL_CIRCUITS.find((x) => x.value === v);
@@ -51,7 +52,7 @@ function PleadingNewPage() {
   const input = {
     courtType, circuit, county,
     plaintiffs, defendants, caseNumber,
-    title, body,
+    title, bodyHtml, footnotes,
   };
 
   const headerLine1 = `IN THE ${courtType} COURT OF THE ${circuit} JUDICIAL CIRCUIT,`;
@@ -75,7 +76,7 @@ function PleadingNewPage() {
       const { error: insErr } = await supabase.from("generated_documents").insert({
         name: docName || "Pleading",
         kind: "pleading",
-        payload: input,
+        payload: input as any,
         storage_path: path,
         created_by: user?.id,
       });
@@ -89,6 +90,17 @@ function PleadingNewPage() {
     }
   };
 
+  const addFootnote = () => {
+    const nextId = (footnotes[footnotes.length - 1]?.id ?? 0) + 1;
+    setFootnotes([...footnotes, { id: nextId, text: "" }]);
+  };
+  const updateFootnote = (id: number, text: string) =>
+    setFootnotes(footnotes.map((f) => (f.id === id ? { ...f, text } : f)));
+  const removeFootnote = (id: number) => {
+    const remaining = footnotes.filter((f) => f.id !== id).map((f, i) => ({ ...f, id: i + 1 }));
+    setFootnotes(remaining);
+  };
+
   return (
     <ProtectedLayout>
       <PageContainer>
@@ -106,8 +118,8 @@ function PleadingNewPage() {
           }
         />
 
+        {/* Top row: settings + caption preview */}
         <div className="grid lg:grid-cols-2 gap-6">
-          {/* Form */}
           <Card>
             <CardContent className="p-5 space-y-5">
               <div className="space-y-1.5">
@@ -161,29 +173,25 @@ function PleadingNewPage() {
                 </div>
               </div>
 
-              <div className="space-y-1.5">
-                <Label>Case No.</Label>
-                <Input value={caseNumber} onChange={(e) => setCaseNumber(e.target.value)} placeholder="e.g. 2025-CA-001234" />
-              </div>
-
-              <div className="space-y-1.5">
-                <Label>Pleading title (optional)</Label>
-                <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. COMPLAINT FOR DAMAGES" />
-              </div>
-
-              <div className="space-y-1.5">
-                <Label>Body (optional)</Label>
-                <Textarea rows={10} value={body} onChange={(e) => setBody(e.target.value)} placeholder="Type the body of the pleading..." />
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div className="space-y-1.5">
+                  <Label>Case No.</Label>
+                  <Input value={caseNumber} onChange={(e) => setCaseNumber(e.target.value)} placeholder="e.g. 2025-CA-001234" />
+                </div>
+                <div className="space-y-1.5">
+                  <Label>Pleading title</Label>
+                  <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="e.g. COMPLAINT FOR DAMAGES" />
+                </div>
               </div>
             </CardContent>
           </Card>
 
-          {/* Preview */}
+          {/* Caption preview */}
           <Card>
             <CardContent className="p-0">
-              <div className="bg-muted/30 px-4 py-2 border-b text-xs uppercase tracking-wider text-muted-foreground">Preview</div>
+              <div className="bg-muted/30 px-4 py-2 border-b text-xs uppercase tracking-wider text-muted-foreground">Caption preview</div>
               <div
-                className="p-10 bg-white text-black min-h-[600px]"
+                className="p-8 bg-white text-black"
                 style={{ fontFamily: '"Bookman Old Style", "URW Bookman", Georgia, serif', fontSize: 12 }}
               >
                 <div className="text-center font-bold leading-snug">
@@ -207,13 +215,70 @@ function PleadingNewPage() {
                 {title && (
                   <div className="text-center font-bold mt-8">{title.toUpperCase()}</div>
                 )}
-                {body && (
-                  <div className="mt-4 whitespace-pre-line">{body}</div>
-                )}
               </div>
             </CardContent>
           </Card>
         </div>
+
+        {/* Full-width body editor */}
+        <Card className="mt-6">
+          <CardContent className="p-5 space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-base">Body</Label>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Bookman Old Style, 12pt · formatting and lists carry into the .docx
+                </p>
+              </div>
+            </div>
+            <RichTextEditor
+              value={bodyHtml}
+              onChange={setBodyHtml}
+              minHeight={500}
+            />
+          </CardContent>
+        </Card>
+
+        {/* Footnotes */}
+        <Card className="mt-6">
+          <CardContent className="p-5 space-y-3">
+            <div className="flex items-center justify-between">
+              <div>
+                <Label className="text-base">Footnotes</Label>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Reference them in the body with <code className="px-1 rounded bg-muted">[1]</code>, <code className="px-1 rounded bg-muted">[2]</code>… (use the Footnote toolbar button to insert a superscript marker)
+                </p>
+              </div>
+              <Button variant="outline" size="sm" onClick={addFootnote}>
+                <Plus className="h-4 w-4 mr-1" /> Add footnote
+              </Button>
+            </div>
+
+            {footnotes.length === 0 ? (
+              <div className="text-sm text-muted-foreground italic py-4 text-center border border-dashed rounded">
+                No footnotes yet.
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {footnotes.map((f) => (
+                  <div key={f.id} className="flex gap-2 items-start">
+                    <div className="font-bold text-sm pt-2 w-8 text-right">{f.id}.</div>
+                    <Textarea
+                      rows={2}
+                      value={f.text}
+                      onChange={(e) => updateFootnote(f.id, e.target.value)}
+                      placeholder="Footnote text…"
+                      className="flex-1"
+                    />
+                    <Button variant="ghost" size="icon" onClick={() => removeFootnote(f.id)} title="Remove">
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
       </PageContainer>
     </ProtectedLayout>
   );