From 6224ddd8127a0ab94b07ebb2a93dac56d7180aea 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 02:05:13 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../forms/form-field-defs-dialog.tsx          | 252 ++++++++++++++++++
 1 file changed, 252 insertions(+)
 create mode 100644 src/components/forms/form-field-defs-dialog.tsx

diff --git a/src/components/forms/form-field-defs-dialog.tsx b/src/components/forms/form-field-defs-dialog.tsx
new file mode 100644
index 0000000..d13f3cf
--- /dev/null
+++ b/src/components/forms/form-field-defs-dialog.tsx
@@ -0,0 +1,252 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Switch } from "@/components/ui/switch";
+import { Trash2, Plus, ArrowUp, ArrowDown } from "lucide-react";
+import type { FormFieldDef, FormFieldType } from "@/lib/forms-shared";
+import { toast } from "sonner";
+
+const TYPE_LABEL: Record<FormFieldType, string> = {
+  text: "Text",
+  textarea: "Long text",
+  number: "Number",
+  date: "Date",
+  dropdown: "Dropdown",
+  county: "Florida County",
+  client: "Client / Association",
+  homeowner: "Homeowner",
+};
+
+function slug(s: string): string {
+  return s
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "_")
+    .replace(/^_+|_+$/g, "")
+    .slice(0, 40);
+}
+
+export function FormFieldDefsDialog({
+  open,
+  onOpenChange,
+  fields,
+  onChange,
+}: {
+  open: boolean;
+  onOpenChange: (v: boolean) => void;
+  fields: FormFieldDef[];
+  onChange: (next: FormFieldDef[]) => void;
+}) {
+  const [draft, setDraft] = useState<FormFieldDef[]>(fields);
+
+  // re-sync when reopened
+  const reset = () => setDraft(fields);
+
+  const update = (i: number, patch: Partial<FormFieldDef>) => {
+    setDraft((prev) => prev.map((f, idx) => (idx === i ? { ...f, ...patch } : f)));
+  };
+  const remove = (i: number) => setDraft((prev) => prev.filter((_, idx) => idx !== i));
+  const move = (i: number, dir: -1 | 1) => {
+    setDraft((prev) => {
+      const next = [...prev];
+      const j = i + dir;
+      if (j < 0 || j >= next.length) return prev;
+      [next[i], next[j]] = [next[j], next[i]];
+      return next;
+    });
+  };
+  const add = () => {
+    const base = "field";
+    let n = 1;
+    const used = new Set(draft.map((d) => d.key));
+    while (used.has(`${base}_${n}`)) n++;
+    setDraft((prev) => [
+      ...prev,
+      { key: `${base}_${n}`, label: `Field ${n}`, type: "text", required: false },
+    ]);
+  };
+
+  const save = () => {
+    // de-dupe + slug keys
+    const seen = new Set<string>();
+    for (const f of draft) {
+      if (!f.label.trim()) {
+        toast.error("Each field needs a label");
+        return;
+      }
+      const key = slug(f.key || f.label);
+      if (!key) {
+        toast.error(`Invalid key for "${f.label}"`);
+        return;
+      }
+      if (seen.has(key)) {
+        toast.error(`Duplicate field key: ${key}`);
+        return;
+      }
+      seen.add(key);
+      f.key = key;
+    }
+    onChange(draft);
+    onOpenChange(false);
+    toast.success("Fields saved");
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        onOpenChange(v);
+        if (v) reset();
+      }}
+    >
+      <DialogContent className="max-w-3xl">
+        <DialogHeader>
+          <DialogTitle>Form fillable fields</DialogTitle>
+          <DialogDescription>
+            Define inputs that will appear when generating this form. Insert them in the body using{" "}
+            <code className="text-xs">{"{{field.key}}"}</code>.
+          </DialogDescription>
+        </DialogHeader>
+        <ScrollArea className="max-h-[60vh] pr-2">
+          <div className="space-y-3">
+            {draft.length === 0 && (
+              <p className="text-sm text-muted-foreground py-4 text-center">
+                No fields yet. Add one to start collecting input.
+              </p>
+            )}
+            {draft.map((f, i) => (
+              <div key={i} className="border rounded-md p-3 space-y-2 bg-muted/20">
+                <div className="grid grid-cols-1 md:grid-cols-[1fr_1fr_180px_auto] gap-2 items-end">
+                  <div>
+                    <Label className="text-xs">Label</Label>
+                    <Input
+                      value={f.label}
+                      onChange={(e) => update(i, { label: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">
+                      Key <span className="text-muted-foreground">(token: {`{{field.${f.key || "..."}}}`})</span>
+                    </Label>
+                    <Input
+                      value={f.key}
+                      onChange={(e) => update(i, { key: e.target.value })}
+                      onBlur={(e) => update(i, { key: slug(e.target.value || f.label) })}
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">Type</Label>
+                    <Select
+                      value={f.type}
+                      onValueChange={(v) => update(i, { type: v as FormFieldType })}
+                    >
+                      <SelectTrigger className="h-9">
+                        <SelectValue />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(Object.keys(TYPE_LABEL) as FormFieldType[]).map((t) => (
+                          <SelectItem key={t} value={t}>
+                            {TYPE_LABEL[t]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </div>
+                  <div className="flex gap-1">
+                    <Button size="icon" variant="ghost" onClick={() => move(i, -1)} title="Move up">
+                      <ArrowUp className="h-4 w-4" />
+                    </Button>
+                    <Button size="icon" variant="ghost" onClick={() => move(i, 1)} title="Move down">
+                      <ArrowDown className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      size="icon"
+                      variant="ghost"
+                      onClick={() => remove(i)}
+                      title="Delete"
+                    >
+                      <Trash2 className="h-4 w-4 text-destructive" />
+                    </Button>
+                  </div>
+                </div>
+
+                {f.type === "dropdown" && (
+                  <div>
+                    <Label className="text-xs">Options (one per line)</Label>
+                    <Textarea
+                      rows={3}
+                      value={(f.options ?? []).join("\n")}
+                      onChange={(e) =>
+                        update(i, {
+                          options: e.target.value
+                            .split("\n")
+                            .map((s) => s.trim())
+                            .filter(Boolean),
+                        })
+                      }
+                      placeholder={"Yes\nNo\nN/A"}
+                    />
+                  </div>
+                )}
+
+                <div className="grid grid-cols-1 md:grid-cols-[1fr_1fr_auto] gap-2 items-end">
+                  <div>
+                    <Label className="text-xs">Placeholder</Label>
+                    <Input
+                      value={f.placeholder ?? ""}
+                      onChange={(e) => update(i, { placeholder: e.target.value })}
+                    />
+                  </div>
+                  <div>
+                    <Label className="text-xs">Default value</Label>
+                    <Input
+                      value={f.default ?? ""}
+                      onChange={(e) => update(i, { default: e.target.value })}
+                    />
+                  </div>
+                  <div className="flex items-center gap-2 pb-2">
+                    <Switch
+                      checked={!!f.required}
+                      onCheckedChange={(v) => update(i, { required: v })}
+                      id={`req-${i}`}
+                    />
+                    <Label htmlFor={`req-${i}`} className="cursor-pointer text-xs">
+                      Required
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+        <DialogFooter className="flex-wrap gap-2">
+          <Button variant="outline" onClick={add}>
+            <Plus className="h-4 w-4 mr-1.5" /> Add field
+          </Button>
+          <div className="flex-1" />
+          <Button variant="ghost" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={save}>Save fields</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}