gpt-engineer-app[bot]andrenee-png
4e3b6b8bc9
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
327 lines
14 KiB
TypeScript
327 lines
14 KiB
TypeScript
import { createFileRoute, useNavigate } from "@tanstack/react-router";
|
|
import { useMemo, useState } from "react";
|
|
import { ProtectedLayout } from "@/components/protected-layout";
|
|
import { PageContainer, PageHeader } from "@/components/app-shell";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { FL_CIRCUITS } from "@/lib/florida";
|
|
import { Packer } from "docx";
|
|
import { buildPleadingDoc, downloadPleading, type PleadingFootnote } from "@/lib/docx-pleading";
|
|
import { downloadPleadingPdf } from "@/lib/pdf-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, FileText, Save, Loader2, Plus, Trash2 } from "lucide-react";
|
|
|
|
export const Route = createFileRoute("/documents/pleading/new")({
|
|
component: PleadingNewPage,
|
|
});
|
|
|
|
function PleadingNewPage() {
|
|
const { user } = useAuth();
|
|
const navigate = useNavigate();
|
|
const [courtType, setCourtType] = useState<"CIRCUIT" | "COUNTY">("CIRCUIT");
|
|
const [circuit, setCircuit] = useState<string>("ELEVENTH");
|
|
const [county, setCounty] = useState<string>("Miami-Dade");
|
|
const [plaintiffs, setPlaintiffs] = useState("");
|
|
const [defendants, setDefendants] = useState("");
|
|
const [caseNumber, setCaseNumber] = useState("");
|
|
const [title, setTitle] = useState("");
|
|
const [bodyHtml, setBodyHtml] = useState("<p></p>");
|
|
const [footnotes, setFootnotes] = useState<PleadingFootnote[]>([]);
|
|
const [footerLeft, setFooterLeft] = useState("");
|
|
const [footerCenter, setFooterCenter] = useState("");
|
|
const [footerRight, setFooterRight] = useState("");
|
|
const [docName, setDocName] = useState("Pleading");
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
const counties = useMemo(() => {
|
|
const c = FL_CIRCUITS.find((x) => x.value === circuit);
|
|
return c?.counties ?? [];
|
|
}, [circuit]);
|
|
|
|
const handleCircuitChange = (v: string) => {
|
|
setCircuit(v);
|
|
const c = FL_CIRCUITS.find((x) => x.value === v);
|
|
if (c && !c.counties.includes(county)) setCounty(c.counties[0]);
|
|
};
|
|
|
|
const input = {
|
|
courtType, circuit, county,
|
|
plaintiffs, defendants, caseNumber,
|
|
title, bodyHtml, footnotes,
|
|
footerLeft, footerCenter, footerRight,
|
|
};
|
|
|
|
const headerLine1 = `IN THE ${courtType} COURT OF THE ${circuit} JUDICIAL CIRCUIT,`;
|
|
const headerLine2 = `IN AND FOR ${county.toUpperCase()} COUNTY, FLORIDA`;
|
|
|
|
const onDownload = async () => {
|
|
await downloadPleading(input, docName || "Pleading");
|
|
};
|
|
|
|
const onDownloadPdf = async () => {
|
|
await downloadPleadingPdf(input, docName || "Pleading");
|
|
};
|
|
|
|
const onSave = async () => {
|
|
setSaving(true);
|
|
try {
|
|
const doc = buildPleadingDoc(input);
|
|
const blob = await Packer.toBlob(doc);
|
|
const safe = (docName || "Pleading").replace(/[^a-zA-Z0-9._-]/g, "_");
|
|
const path = `${user?.id}/${Date.now()}-${safe}.docx`;
|
|
const { error: upErr } = await supabase.storage.from("generated-documents").upload(path, blob, {
|
|
contentType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
|
|
});
|
|
if (upErr) throw upErr;
|
|
const { error: insErr } = await supabase.from("generated_documents").insert({
|
|
name: docName || "Pleading",
|
|
kind: "pleading",
|
|
payload: input as any,
|
|
storage_path: path,
|
|
created_by: user?.id,
|
|
});
|
|
if (insErr) throw insErr;
|
|
toast.success("Pleading saved");
|
|
navigate({ to: "/documents" });
|
|
} catch (e: any) {
|
|
toast.error(e.message ?? "Save failed");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
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>
|
|
<PageHeader
|
|
title="New Pleading"
|
|
description="Florida court caption · Bookman Old Style, 12pt"
|
|
actions={
|
|
<>
|
|
<Button variant="outline" onClick={onDownloadPdf}><FileText className="h-4 w-4 mr-2" /> Download PDF</Button>
|
|
<Button variant="outline" onClick={onDownload}><Download className="h-4 w-4 mr-2" /> Download .docx</Button>
|
|
<Button onClick={onSave} disabled={saving}>
|
|
{saving ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Save className="h-4 w-4 mr-2" />}
|
|
Save & download
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
|
|
{/* Top row: settings + caption preview */}
|
|
<div className="grid lg:grid-cols-2 gap-6">
|
|
<Card>
|
|
<CardContent className="p-5 space-y-5">
|
|
<div className="space-y-1.5">
|
|
<Label>Document name</Label>
|
|
<Input value={docName} onChange={(e) => setDocName(e.target.value)} placeholder="e.g. Complaint - Smith v. Jones" />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label>Court</Label>
|
|
<Select value={courtType} onValueChange={(v) => setCourtType(v as any)}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="CIRCUIT">CIRCUIT</SelectItem>
|
|
<SelectItem value="COUNTY">COUNTY</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>Judicial circuit</Label>
|
|
<Select value={circuit} onValueChange={handleCircuitChange}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent className="max-h-72">
|
|
{FL_CIRCUITS.map((c) => (
|
|
<SelectItem key={c.value} value={c.value}>{c.label} ({c.value})</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>County</Label>
|
|
<Select value={county} onValueChange={setCounty}>
|
|
<SelectTrigger><SelectValue /></SelectTrigger>
|
|
<SelectContent className="max-h-72">
|
|
{counties.map((co) => (
|
|
<SelectItem key={co} value={co}>{co}</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label>Plaintiff(s)</Label>
|
|
<Textarea rows={3} value={plaintiffs} onChange={(e) => setPlaintiffs(e.target.value)} placeholder="One name per line" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label>Defendant(s)</Label>
|
|
<Textarea rows={3} value={defendants} onChange={(e) => setDefendants(e.target.value)} placeholder="One name per line" />
|
|
</div>
|
|
</div>
|
|
|
|
<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>
|
|
|
|
{/* 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">Caption preview</div>
|
|
<div
|
|
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">
|
|
<div>{headerLine1}</div>
|
|
<div>{headerLine2}</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex">
|
|
<div className="flex-1 pr-4 border-r border-black">
|
|
<div className="whitespace-pre-line min-h-[1.5em]">{plaintiffs || " "}</div>
|
|
<div className="mt-3">Plaintiff(s),</div>
|
|
<div className="mt-3">v.</div>
|
|
<div className="mt-3 whitespace-pre-line min-h-[1.5em]">{defendants || " "}</div>
|
|
<div className="mt-3">Defendant(s).</div>
|
|
</div>
|
|
<div className="w-[40%] pl-4">
|
|
<div className="font-bold">CASE NO.: {caseNumber}</div>
|
|
</div>
|
|
</div>
|
|
|
|
{title && (
|
|
<div className="text-center font-bold mt-8">{title.toUpperCase()}</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>
|
|
|
|
{/* Footer */}
|
|
<Card className="mt-6">
|
|
<CardContent className="p-5 space-y-3">
|
|
<div>
|
|
<Label className="text-base">Page footer</Label>
|
|
<p className="text-xs text-muted-foreground mt-0.5">
|
|
Three columns. The right column always ends with <code className="px-1 rounded bg-muted">Page X of Y</code>.
|
|
</p>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Left</Label>
|
|
<Input value={footerLeft} onChange={(e) => setFooterLeft(e.target.value)} placeholder="e.g. Smith v. Jones" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Center</Label>
|
|
<Input value={footerCenter} onChange={(e) => setFooterCenter(e.target.value)} placeholder="e.g. Case No. 2025-CA-001234" />
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
<Label className="text-xs">Right (prefix)</Label>
|
|
<Input value={footerRight} onChange={(e) => setFooterRight(e.target.value)} placeholder="(optional text before Page X of Y)" />
|
|
</div>
|
|
</div>
|
|
<div className="border rounded-md p-3 bg-muted/20 grid grid-cols-3 text-xs" style={{ fontFamily: '"Bookman Old Style", Georgia, serif' }}>
|
|
<div className="text-left truncate">{footerLeft || <span className="text-muted-foreground italic">left</span>}</div>
|
|
<div className="text-center truncate">{footerCenter || <span className="text-muted-foreground italic">center</span>}</div>
|
|
<div className="text-right truncate">{footerRight ? `${footerRight} ` : ""}Page 1 of N</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</PageContainer>
|
|
</ProtectedLayout>
|
|
);
|
|
}
|