Changes

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

src/components/forms/client-case-picker.tsx

@@ -1,12 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import {
   fetchClients,
   fetchAccessibleCases,
@@ -42,56 +36,43 @@ export function ClientCasePicker({
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
         <Label>Client / Association</Label>
-        <Select
+        <SearchableSelect
           value={clientId}
           onValueChange={(id) => {
             const c = clients.find((x) => x.id === id) ?? null;
             onClientChange(id, c);
             onCaseChange("", null);
           }}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select a client" />
-          </SelectTrigger>
-          <SelectContent>
-            {clients.map((c) => (
-              <SelectItem key={c.id} value={c.id}>
-                {c.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          placeholder="Select a client"
+          searchPlaceholder="Search clients…"
+          emptyText="No clients found."
+          options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+        />
       </div>
       <div>
         <Label>Case (optional)</Label>
-        <Select
+        <SearchableSelect
           value={caseId}
           onValueChange={(id) => {
             const k = cases.find((x) => x.id === id) ?? null;
             onCaseChange(id, k);
           }}
           disabled={!clientId}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder={clientId ? "Select case" : "Pick client first"} />
-          </SelectTrigger>
-          <SelectContent>
-            {filteredCases.length === 0 ? (
-              <div className="px-2 py-1.5 text-xs text-muted-foreground">
-                {clientId ? "No cases for this client" : ""}
-              </div>
-            ) : (
-              filteredCases.map((c) => (
-                <SelectItem key={c.id} value={c.id}>
-                  <span className="font-mono text-xs text-muted-foreground mr-2">
-                    {c.case_number}
-                  </span>
-                  {c.title}
-                </SelectItem>
-              ))
-            )}
-          </SelectContent>
-        </Select>
+          placeholder={clientId ? "Select case" : "Pick client first"}
+          searchPlaceholder="Search cases…"
+          emptyText={clientId ? "No cases for this client." : "Pick a client first."}
+          options={filteredCases.map((c) => ({
+            value: c.id,
+            label: `${c.case_number} — ${c.title}`,
+            keywords: `${c.case_number} ${c.title}`,
+            render: (
+              <span>
+                <span className="font-mono text-xs text-muted-foreground mr-2">{c.case_number}</span>
+                {c.title}
+              </span>
+            ),
+          }))}
+        />
       </div>
     </div>
   );

src/components/forms/form-pickers.tsx

@@ -1,12 +1,6 @@
 import { useEffect, useState } from "react";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import { Label } from "@/components/ui/label";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import {
   fetchClients,
   fetchHomeowners,
@@ -46,49 +40,37 @@ export function ClientHomeownerPicker({
     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
       <div>
         <Label>Client / Association</Label>
-        <Select
+        <SearchableSelect
           value={clientId}
           onValueChange={(id) => {
             const c = clients.find((x) => x.id === id) ?? null;
             onClientChange(id, c);
             onHomeownerChange("", null);
           }}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="Select a client" />
-          </SelectTrigger>
-          <SelectContent>
-            {clients.map((c) => (
-              <SelectItem key={c.id} value={c.id}>
-                {c.name}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+          placeholder="Select a client"
+          searchPlaceholder="Search clients…"
+          emptyText="No clients found."
+          options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+        />
       </div>
       {showHomeowner && (
         <div>
           <Label>Homeowner (optional)</Label>
-          <Select
+          <SearchableSelect
             value={homeownerId}
             onValueChange={(id) => {
               const h = homeowners.find((x) => x.id === id) ?? null;
               onHomeownerChange(id, h);
             }}
             disabled={!clientId}
-          >
-            <SelectTrigger>
-              <SelectValue placeholder={clientId ? "Select homeowner" : "Pick client first"} />
-            </SelectTrigger>
-            <SelectContent>
-              {homeowners.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>
+            placeholder={clientId ? "Select homeowner" : "Pick client first"}
+            searchPlaceholder="Search homeowners…"
+            emptyText="No homeowners found."
+            options={homeowners.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>