Changes

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

src/routes/documents.pleading.new.tsx

@@ -444,7 +444,141 @@ function PleadingNewPage() {
           </CardContent>
         </Card>
 
-        {/* Footer */}
+        {/* Service list (optional) */}
+        <Card className="mt-6">
+          <CardContent className="p-5 space-y-4">
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <Label className="text-base flex items-center gap-2">
+                  <Users className="h-4 w-4 text-muted-foreground" /> Service list
+                </Label>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Optional. If you add any contacts, a dedicated page is appended to the pleading listing each one.
+                </p>
+              </div>
+              <ContactPickerPopover
+                label="Add from contacts"
+                onPick={(c) => {
+                  setServiceList((prev) => [
+                    ...prev,
+                    {
+                      name: c.name,
+                      role: c.title || undefined,
+                      company: c.company || undefined,
+                      email: c.email || undefined,
+                      phone: c.phone || undefined,
+                      address: "",
+                    },
+                  ]);
+                }}
+              />
+            </div>
+
+            <div className="space-y-1.5 max-w-sm">
+              <Label className="text-xs">Page title</Label>
+              <Input
+                value={serviceListTitle}
+                onChange={(e) => setServiceListTitle(e.target.value)}
+                placeholder="SERVICE LIST"
+              />
+            </div>
+
+            {serviceList.length === 0 ? (
+              <div className="text-sm text-muted-foreground italic py-4 text-center border border-dashed rounded">
+                No contacts added. Use “Add from contacts” to include a service list page.
+              </div>
+            ) : (
+              <div className="space-y-3">
+                {serviceList.map((c, idx) => (
+                  <div key={idx} className="border rounded-md p-3 space-y-2 bg-muted/10">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 flex-1">
+                        <Input
+                          placeholder="Name"
+                          value={c.name}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, name: e.target.value } : x)),
+                            )
+                          }
+                        />
+                        <Input
+                          placeholder="Role / title"
+                          value={c.role || ""}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, role: e.target.value } : x)),
+                            )
+                          }
+                        />
+                        <Input
+                          placeholder="Company / firm"
+                          value={c.company || ""}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, company: e.target.value } : x)),
+                            )
+                          }
+                        />
+                        <Input
+                          placeholder="Email"
+                          value={c.email || ""}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, email: e.target.value } : x)),
+                            )
+                          }
+                        />
+                        <Input
+                          placeholder="Phone"
+                          value={c.phone || ""}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, phone: e.target.value } : x)),
+                            )
+                          }
+                        />
+                        <Textarea
+                          rows={2}
+                          placeholder="Address (one line per row)"
+                          value={c.address || ""}
+                          onChange={(e) =>
+                            setServiceList((prev) =>
+                              prev.map((x, i) => (i === idx ? { ...x, address: e.target.value } : x)),
+                            )
+                          }
+                        />
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        onClick={() =>
+                          setServiceList((prev) => prev.filter((_, i) => i !== idx))
+                        }
+                        title="Remove"
+                      >
+                        <Trash2 className="h-4 w-4 text-destructive" />
+                      </Button>
+                    </div>
+                  </div>
+                ))}
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() =>
+                    setServiceList((prev) => [
+                      ...prev,
+                      { name: "", role: "", company: "", email: "", phone: "", address: "" },
+                    ])
+                  }
+                >
+                  <Plus className="h-4 w-4 mr-1" /> Add blank entry
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
         <Card className="mt-6">
           <CardContent className="p-5 space-y-3">
             <div>