Changes

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

src/components/cases/collections-tab.tsx

@@ -1148,19 +1148,17 @@ function AddCollectionDialog({
                   : "All homeowners on this HOA already have a collection on this matter."}
               </p>
             ) : (
-              <Select value={homeownerId} onValueChange={setHomeownerId}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Pick a homeowner…" />
-                </SelectTrigger>
-                <SelectContent>
-                  {available.map((h) => (
-                    <SelectItem key={h.id} value={h.id}>
-                      {h.last_name}, {h.first_name}
-                      {h.unit_number ? ` — Unit ${h.unit_number}` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <SearchableSelect
+                value={homeownerId}
+                onValueChange={setHomeownerId}
+                placeholder="Pick a homeowner…"
+                searchPlaceholder="Search homeowners…"
+                emptyText="No homeowners found."
+                options={available.map((h) => {
+                  const label = `${h.last_name}, ${h.first_name}${h.unit_number ? ` — Unit ${h.unit_number}` : ""}`;
+                  return { value: h.id, label, keywords: `${h.first_name} ${h.last_name} ${h.unit_number ?? ""}` };
+                })}
+              />
             )}
           </div>
           <div>