Added certified mail field

X-Lovable-Edit-ID: edt-7ebf1c18-40a0-4f29-81bd-898f7cae8bb3
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/components/forms/letter-generator.tsx

@@ -50,6 +50,7 @@ export function LetterGenerator() {
   const [subject, setSubject] = useState("");
   const [body, setBody] = useState("");
   const [date, setDate] = useState(new Date().toISOString().slice(0, 10));
+  const [certifiedMailNumber, setCertifiedMailNumber] = useState("");
   const [template, setTemplate] = useState<FormTemplateConfig | null>(null);
 
   useEffect(() => {
@@ -220,6 +221,16 @@ export function LetterGenerator() {
       });
     }
 
+    // Certified mail line (right-aligned, italic) — only when a number is provided
+    if (certifiedMailNumber.trim() && template.showCertifiedMail !== false) {
+      doc.setFont(bodyFont, "bolditalic");
+      const label = template.certifiedMailLabel ?? "U.S. Certified Mail #";
+      const txt = `${label} ${certifiedMailNumber.trim()}`;
+      doc.text(txt, pageW - margin - doc.getTextWidth(txt), y);
+      doc.setFont(bodyFont, "normal");
+      y += lh + 2;
+    }
+
     y += 18;
     if (renderedSubject) {
       doc.setFont(bodyFont, "bold");
@@ -313,7 +324,7 @@ export function LetterGenerator() {
               setHomeowner(h);
             }}
           />
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <Label>Date</Label>
               <Input type="date" value={date} onChange={(e) => setDate(e.target.value)} />
@@ -330,6 +341,14 @@ export function LetterGenerator() {
               <Label>Subject (Re:)</Label>
               <Input value={subject} onChange={(e) => setSubject(e.target.value)} />
             </div>
+            <div>
+              <Label>Certified Mail # (optional)</Label>
+              <Input
+                value={certifiedMailNumber}
+                onChange={(e) => setCertifiedMailNumber(e.target.value)}
+                placeholder="9407 1234 5678 9012 3456 78"
+              />
+            </div>
           </div>
           <div>
             <Label>Body</Label>