Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/documents.pleading.new.tsx

@@ -283,6 +283,37 @@ function PleadingNewPage() {
             )}
           </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>
   );