From 135a4959076488fa4867e6353e761222d9147cce 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:07:20 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/custom-form-builder.tsx | 105 ++++++++++++-------
 1 file changed, 65 insertions(+), 40 deletions(-)

diff --git a/src/components/forms/custom-form-builder.tsx b/src/components/forms/custom-form-builder.tsx
index bdaccfc..d9c9db9 100644
--- a/src/components/forms/custom-form-builder.tsx
+++ b/src/components/forms/custom-form-builder.tsx
@@ -773,47 +773,72 @@ export function CustomFormBuilder() {
       </Card>
 
       <div className="grid grid-cols-1 lg:grid-cols-[260px_1fr] gap-4">
-        <Card>
-          <CardContent className="pt-4 space-y-3">
-            <div>
-              <Label className="text-xs uppercase tracking-wider text-muted-foreground">Variables</Label>
-              <p className="text-xs text-muted-foreground mt-1">Click to insert at cursor.</p>
-            </div>
-            <div className="relative">
-              <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-              <Input
-                placeholder="Search variables..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="pl-8 h-8 text-xs"
-              />
-            </div>
-            <ScrollArea className="h-[420px] pr-2">
-              <div className="space-y-1">
-                {filteredVars.map((v) => (
-                  <button
-                    key={v.key}
-                    onClick={() => insertVar(v.key)}
-                    className="w-full text-left px-2.5 py-2 rounded hover:bg-accent transition-colors border border-transparent hover:border-border"
-                  >
-                    <div className="font-mono text-xs font-semibold text-primary flex items-center gap-1">
-                      {v.key}
-                      {v.kind === "custom" && (
-                        <span className="text-[9px] px-1 rounded bg-accent text-accent-foreground">custom</span>
-                      )}
-                    </div>
-                    <div className="text-[11px] text-muted-foreground mt-0.5">{v.description}</div>
-                  </button>
-                ))}
-                {customDefs.length === 0 && (
-                  <p className="text-[11px] text-muted-foreground italic px-2 pt-2">
-                    Tip: define custom case fields in <strong>Settings → Custom case fields</strong> to use them here as <code>{"{{custom.key}}"}</code>.
-                  </p>
-                )}
+        <div className="space-y-4">
+          <Card>
+            <CardContent className="pt-4 space-y-3">
+              <div>
+                <Label className="text-xs uppercase tracking-wider text-muted-foreground">Variables</Label>
+                <p className="text-xs text-muted-foreground mt-1">Click to insert at cursor.</p>
               </div>
-            </ScrollArea>
-          </CardContent>
-        </Card>
+              <div className="relative">
+                <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+                <Input
+                  placeholder="Search variables..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="pl-8 h-8 text-xs"
+                />
+              </div>
+              <ScrollArea className="h-[260px] pr-2">
+                <div className="space-y-1">
+                  {filteredVars.map((v) => (
+                    <button
+                      key={v.key}
+                      onClick={() => insertVar(v.key)}
+                      className="w-full text-left px-2.5 py-2 rounded hover:bg-accent transition-colors border border-transparent hover:border-border"
+                    >
+                      <div className="font-mono text-xs font-semibold text-primary flex items-center gap-1">
+                        {v.key}
+                        {v.kind === "custom" && (
+                          <span className="text-[9px] px-1 rounded bg-accent text-accent-foreground">custom</span>
+                        )}
+                        {v.kind === "field" && (
+                          <span className="text-[9px] px-1 rounded bg-primary/10 text-primary">field</span>
+                        )}
+                      </div>
+                      <div className="text-[11px] text-muted-foreground mt-0.5">{v.description}</div>
+                    </button>
+                  ))}
+                  {customDefs.length === 0 && formFields.length === 0 && (
+                    <p className="text-[11px] text-muted-foreground italic px-2 pt-2">
+                      Tip: define fillable fields below, or custom case fields in <strong>Settings → Custom case fields</strong>.
+                    </p>
+                  )}
+                </div>
+              </ScrollArea>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardContent className="pt-4 space-y-3">
+              <div className="flex items-center justify-between">
+                <Label className="text-xs uppercase tracking-wider text-muted-foreground">
+                  Fillable fields
+                </Label>
+                <Button size="sm" variant="ghost" onClick={() => setFieldsDialogOpen(true)}>
+                  Edit fields
+                </Button>
+              </div>
+              <ScrollArea className="h-[300px] pr-2">
+                <FormFieldsFillPanel
+                  fields={formFields}
+                  values={fieldValues}
+                  onChange={setFieldValues}
+                />
+              </ScrollArea>
+            </CardContent>
+          </Card>
+        </div>
 
         <Card>
           <CardContent className="pt-4">