From 2f39feea64c556493d72fadb88228603a4a63790 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 18:21:48 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/settings.form-templates.tsx | 141 +++++++++++++++++++++++++
 1 file changed, 141 insertions(+)

diff --git a/src/routes/settings.form-templates.tsx b/src/routes/settings.form-templates.tsx
index 26650d5..1ea1edd 100644
--- a/src/routes/settings.form-templates.tsx
+++ b/src/routes/settings.form-templates.tsx
@@ -305,3 +305,144 @@ function TemplateEditor({ formKey, userId }: { formKey: FormKey; userId: string
     </Card>
   );
 }
+
+function LetterheadFooterEditor({
+  config,
+  update,
+}: {
+  config: FormTemplateConfig;
+  update: <K extends keyof FormTemplateConfig>(key: K, value: FormTemplateConfig[K]) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-sm font-semibold">Company letterhead</h3>
+        <p className="text-xs text-muted-foreground">
+          Designed once here, then printed on every letter generated from{" "}
+          <strong>Forms → Letter</strong>. Use tokens like <code>{`{{firm.name}}`}</code>,{" "}
+          <code>{`{{firm.address}}`}</code>, <code>{`{{firm.phone}}`}</code>,{" "}
+          <code>{`{{firm.email}}`}</code>, <code>{`{{firm.website}}`}</code>.
+        </p>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Letterhead text</Label>
+        <Textarea
+          rows={5}
+          value={config.letterhead ?? ""}
+          onChange={(e) => update("letterhead", e.target.value)}
+          className="font-mono text-sm"
+          placeholder={"{{firm.name}}\n{{firm.address}}\n{{firm.phone}}  ·  {{firm.email}}"}
+        />
+        <p className="text-[11px] text-muted-foreground">One line per row. Blank lines add spacing.</p>
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
+        <div className="space-y-1.5">
+          <Label className="text-xs">Alignment</Label>
+          <Select
+            value={config.letterheadAlign ?? "center"}
+            onValueChange={(v) => update("letterheadAlign", v as any)}
+          >
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="left">Left</SelectItem>
+              <SelectItem value="center">Center</SelectItem>
+              <SelectItem value="right">Right</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Font size (pt)</Label>
+          <Input
+            type="number"
+            value={config.letterheadFontSizePt ?? 10}
+            onChange={(e) => update("letterheadFontSizePt", Number(e.target.value) || 10)}
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Logo placement</Label>
+          <Select
+            value={config.logoPosition ?? "above-center"}
+            onValueChange={(v) => update("logoPosition", v as any)}
+          >
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="none">No logo</SelectItem>
+              <SelectItem value="above-center">Above (centered)</SelectItem>
+              <SelectItem value="above-left">Above (left)</SelectItem>
+              <SelectItem value="left">Left of text</SelectItem>
+              <SelectItem value="right">Right of text</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Logo width (pt)</Label>
+          <Input
+            type="number"
+            value={config.logoWidthPt ?? 50}
+            onChange={(e) => update("logoWidthPt", Number(e.target.value) || 50)}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Switch
+          checked={config.letterheadRule ?? true}
+          onCheckedChange={(v) => update("letterheadRule", v)}
+        />
+        <Label className="text-sm">Draw a horizontal rule below the letterhead</Label>
+      </div>
+
+      <div className="border-t pt-5">
+        <h3 className="text-sm font-semibold">Page footer</h3>
+        <p className="text-xs text-muted-foreground">
+          Printed at the bottom of every page. Page numbers are added automatically.
+        </p>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label>Footer text</Label>
+        <Textarea
+          rows={3}
+          value={config.footer ?? ""}
+          onChange={(e) => update("footer", e.target.value)}
+          className="font-mono text-sm"
+          placeholder="{{firm.name}}  ·  {{firm.address}}  ·  {{firm.phone}}"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+        <div className="space-y-1.5">
+          <Label className="text-xs">Alignment</Label>
+          <Select
+            value={config.footerAlign ?? "center"}
+            onValueChange={(v) => update("footerAlign", v as any)}
+          >
+            <SelectTrigger><SelectValue /></SelectTrigger>
+            <SelectContent>
+              <SelectItem value="left">Left</SelectItem>
+              <SelectItem value="center">Center</SelectItem>
+              <SelectItem value="right">Right</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="space-y-1.5">
+          <Label className="text-xs">Font size (pt)</Label>
+          <Input
+            type="number"
+            value={config.footerFontSizePt ?? 9}
+            onChange={(e) => update("footerFontSizePt", Number(e.target.value) || 9)}
+          />
+        </div>
+        <div className="flex items-end gap-3 pb-1">
+          <Switch
+            checked={config.footerRule ?? true}
+            onCheckedChange={(v) => update("footerRule", v)}
+          />
+          <Label className="text-sm">Rule above footer</Label>
+        </div>
+      </div>
+    </div>
+  );
+}