From fbbe212ce4882dd6be739b11110efd6c86310741 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 17:09:03 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../forms/form-fields-fill-panel.tsx          | 64 +++++++------------
 1 file changed, 22 insertions(+), 42 deletions(-)

diff --git a/src/components/forms/form-fields-fill-panel.tsx b/src/components/forms/form-fields-fill-panel.tsx
index a419286..dcc3f48 100644
--- a/src/components/forms/form-fields-fill-panel.tsx
+++ b/src/components/forms/form-fields-fill-panel.tsx
@@ -155,25 +155,17 @@ export function FormFieldsFillPanel({
           return (
             <div key={f.key}>
               {labelEl}
-              <Select
+              <SearchableSelect
                 value={v}
                 onValueChange={(val) => {
                   const c = clients.find((x) => x.name === val);
-                  // store the name as the substituted value
                   set(f.key, c?.name ?? val);
                 }}
-              >
-                <SelectTrigger className="h-9">
-                  <SelectValue placeholder="Select client" />
-                </SelectTrigger>
-                <SelectContent>
-                  {clients.map((c) => (
-                    <SelectItem key={c.id} value={c.name}>
-                      {c.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="Select client"
+                searchPlaceholder="Search clients…"
+                emptyText="No clients found."
+                options={clients.map((c) => ({ value: c.name, label: c.name, keywords: c.name }))}
+              />
             </div>
           );
         }
@@ -183,42 +175,30 @@ export function FormFieldsFillPanel({
           return (
             <div key={f.key} className="space-y-1">
               {labelEl}
-              <Select
+              <SearchableSelect
                 value={filterClientId}
                 onValueChange={(val) => {
                   setHoClientByField((p) => ({ ...p, [f.key]: val }));
                   ensureHomeowners(val);
                 }}
-              >
-                <SelectTrigger className="h-8 text-xs">
-                  <SelectValue placeholder="Filter by client" />
-                </SelectTrigger>
-                <SelectContent>
-                  {clients.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-              <Select
+                placeholder="Filter by client"
+                searchPlaceholder="Search clients…"
+                emptyText="No clients found."
+                triggerClassName="h-8 text-xs"
+                options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+              />
+              <SearchableSelect
                 value={v}
                 onValueChange={(val) => set(f.key, val)}
                 disabled={!filterClientId}
-              >
-                <SelectTrigger className="h-9">
-                  <SelectValue
-                    placeholder={filterClientId ? "Select homeowner" : "Pick client first"}
-                  />
-                </SelectTrigger>
-                <SelectContent>
-                  {hos.map((h) => {
-                    const name = `${h.first_name} ${h.last_name}${h.unit_number ? ` — Unit ${h.unit_number}` : ""}`;
-                    return (
-                      <SelectItem key={h.id} value={name}>
-                        {name}
-                      </SelectItem>
-                    );
+                placeholder={filterClientId ? "Select homeowner" : "Pick client first"}
+                searchPlaceholder="Search homeowners…"
+                emptyText="No homeowners found."
+                options={hos.map((h) => {
+                  const name = `${h.first_name} ${h.last_name}${h.unit_number ? ` — Unit ${h.unit_number}` : ""}`;
+                  return { value: name, label: name, keywords: name };
+                })}
+              />
                   })}
                 </SelectContent>
               </Select>