Changes

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

src/routes/settings.profile.tsx

@@ -300,6 +300,86 @@ function ProfilePage() {
         </CardContent>
       </Card>
 
+      <Card className="border-border/60">
+        <CardHeader>
+          <CardTitle className="font-serif text-base flex items-center gap-2">
+            <PenLine className="h-4 w-4 text-muted-foreground" /> Attorney signature
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-5">
+          <p className="text-xs text-muted-foreground">
+            Used in pleadings. The signature line is drawn automatically; the block
+            below appears under it. Optionally upload a scanned signature image to
+            place above the line.
+          </p>
+
+          <Field label="Signature block">
+            <Textarea
+              rows={6}
+              value={form.signature_block}
+              onChange={(e) => update("signature_block", e.target.value)}
+              placeholder={`Jane Q. Attorney, Esq.\nFlorida Bar No. 123456\nSmith & Associates, P.A.\n123 Main St., Suite 200\nMiami, FL 33131\n(305) 555-0100 · jane@smithlaw.com`}
+              className="font-mono text-sm"
+            />
+          </Field>
+
+          <div className="space-y-2">
+            <Label className="text-xs">Signature image (optional)</Label>
+            <div className="flex flex-wrap items-center gap-4">
+              <div className="border rounded-md bg-white p-3 min-w-[220px] min-h-[80px] flex items-center justify-center">
+                {signatureUrl ? (
+                  <img
+                    src={signatureUrl}
+                    alt="Signature"
+                    className="max-h-[80px] max-w-[260px] object-contain"
+                  />
+                ) : (
+                  <span className="text-xs text-muted-foreground italic">
+                    No signature image
+                  </span>
+                )}
+              </div>
+              <div className="flex flex-col gap-2">
+                <input
+                  ref={sigInput}
+                  type="file"
+                  accept="image/png,image/jpeg"
+                  className="hidden"
+                  onChange={(e) => {
+                    const f = e.target.files?.[0];
+                    if (f) onSignatureFile(f);
+                    e.target.value = "";
+                  }}
+                />
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => sigInput.current?.click()}
+                    disabled={uploadingSig}
+                  >
+                    {uploadingSig ? (
+                      <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Upload className="h-4 w-4 mr-2" />
+                    )}
+                    Upload signature
+                  </Button>
+                  {form.signature_image_path && (
+                    <Button variant="ghost" size="sm" onClick={removeSignatureImage}>
+                      <Trash2 className="h-4 w-4 mr-2" /> Remove
+                    </Button>
+                  )}
+                </div>
+                <p className="text-xs text-muted-foreground">
+                  PNG or JPG with transparent or white background, up to 2 MB.
+                </p>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
       <div className="flex justify-end">
         <Button onClick={save} disabled={saving}>
           {saving && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}