Changes
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
This commit is contained in:
gpt-engineer-app[bot]
co-authored by
renee-png
renee-png
parent
e1b20e7395
commit
485ddcdc61
@@ -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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user