From c08ec1ff16a108417988e74eb5fd5443319be077 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:08:09 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/collections-tab.tsx | 24 +++++------
 src/components/tasks/new-task-dialog.tsx | 52 +++++++++++-------------
 src/routes/cases.new.tsx                 | 18 ++++----
 src/routes/status.index.tsx              | 25 ++++++------
 4 files changed, 58 insertions(+), 61 deletions(-)

diff --git a/src/components/cases/collections-tab.tsx b/src/components/cases/collections-tab.tsx
index 6070458..a0298cb 100644
--- a/src/components/cases/collections-tab.tsx
+++ b/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>
diff --git a/src/components/tasks/new-task-dialog.tsx b/src/components/tasks/new-task-dialog.tsx
index 93ee063..15058ed 100644
--- a/src/components/tasks/new-task-dialog.tsx
+++ b/src/components/tasks/new-task-dialog.tsx
@@ -214,46 +214,42 @@ export function NewTaskDialog({
           <div className="grid grid-cols-2 gap-3">
             <div>
               <Label className="text-xs">Client (optional)</Label>
-              <Select
+              <SearchableSelect
                 value={clientId ?? "_none"}
                 onValueChange={(v) => {
                   const next = v === "_none" ? null : v;
                   setClientId(next);
-                  // Clear case if it doesn't belong to selected client
                   if (next && caseId) {
                     const k = cases.find((c) => c.id === caseId);
                     if (k && k.client_id !== next) setCaseId(null);
                   }
                 }}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="No client" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="_none">No client</SelectItem>
-                  {clients.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.name}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="No client"
+                searchPlaceholder="Search clients…"
+                emptyText="No clients found."
+                options={[
+                  { value: "_none", label: "No client" },
+                  ...clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name })),
+                ]}
+              />
             </div>
             <div>
               <Label className="text-xs">Case (optional)</Label>
-              <Select value={caseId ?? "_none"} onValueChange={(v) => setCaseId(v === "_none" ? null : v)}>
-                <SelectTrigger>
-                  <SelectValue placeholder="No case" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="_none">No case</SelectItem>
-                  {filteredCases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.case_number} — {c.title}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <SearchableSelect
+                value={caseId ?? "_none"}
+                onValueChange={(v) => setCaseId(v === "_none" ? null : v)}
+                placeholder="No case"
+                searchPlaceholder="Search cases…"
+                emptyText="No cases found."
+                options={[
+                  { value: "_none", label: "No case" },
+                  ...filteredCases.map((c) => ({
+                    value: c.id,
+                    label: `${c.case_number} — ${c.title}`,
+                    keywords: `${c.case_number} ${c.title}`,
+                  })),
+                ]}
+              />
             </div>
           </div>
           <div>
diff --git a/src/routes/cases.new.tsx b/src/routes/cases.new.tsx
index 9f1e63d..156db0e 100644
--- a/src/routes/cases.new.tsx
+++ b/src/routes/cases.new.tsx
@@ -112,13 +112,17 @@ function NewCase() {
             <div className="grid grid-cols-2 gap-3">
               <div className="space-y-2">
                 <Label>Client <span className="text-muted-foreground font-normal">(optional)</span></Label>
-                <Select value={form.client_id || "__none"} onValueChange={(v) => setForm({ ...form, client_id: v === "__none" ? "" : v })}>
-                  <SelectTrigger><SelectValue placeholder="No client" /></SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="__none">No client (attach later)</SelectItem>
-                    {clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
-                  </SelectContent>
-                </Select>
+                <SearchableSelect
+                  value={form.client_id || "__none"}
+                  onValueChange={(v) => setForm({ ...form, client_id: v === "__none" ? "" : v })}
+                  placeholder="No client"
+                  searchPlaceholder="Search clients…"
+                  emptyText="No clients found."
+                  options={[
+                    { value: "__none", label: "No client (attach later)" },
+                    ...clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name })),
+                  ]}
+                />
               </div>
               <div className="space-y-2">
                 <Label>Case number</Label>
diff --git a/src/routes/status.index.tsx b/src/routes/status.index.tsx
index 78395d8..37fd7aa 100644
--- a/src/routes/status.index.tsx
+++ b/src/routes/status.index.tsx
@@ -110,19 +110,18 @@ function StatusUpdatesPage() {
             <form onSubmit={submit} className="space-y-4">
               <div className="space-y-1.5">
                 <Label>Case</Label>
-                <Select value={caseId} onValueChange={setCaseId}>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Select a case…" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {cases.map((c) => (
-                      <SelectItem key={c.id} value={c.id}>
-                        {c.case_number} — {c.title}
-                        {c.client?.name ? ` · ${c.client.name}` : ""}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <SearchableSelect
+                  value={caseId}
+                  onValueChange={setCaseId}
+                  placeholder="Select a case…"
+                  searchPlaceholder="Search cases…"
+                  emptyText="No cases found."
+                  options={cases.map((c) => ({
+                    value: c.id,
+                    label: `${c.case_number} — ${c.title}${c.client?.name ? ` · ${c.client.name}` : ""}`,
+                    keywords: `${c.case_number} ${c.title} ${c.client?.name ?? ""}`,
+                  }))}
+                />
                 {selectedCase && (
                   <Link
                     to="/cases/$caseId"