From 3faf312c471df9a949af46d2ce560fe5ac520b54 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:04:32 +0000
Subject: [PATCH 01/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/ui/searchable-select.tsx | 127 ++++++++++++++++++++++++
 1 file changed, 127 insertions(+)
 create mode 100644 src/components/ui/searchable-select.tsx

diff --git a/src/components/ui/searchable-select.tsx b/src/components/ui/searchable-select.tsx
new file mode 100644
index 0000000..de7a756
--- /dev/null
+++ b/src/components/ui/searchable-select.tsx
@@ -0,0 +1,127 @@
+import * as React from "react";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+export interface SearchableSelectOption {
+  value: string;
+  /** Visible label in the selected trigger */
+  label: string;
+  /** Custom render for the option row (defaults to label) */
+  render?: React.ReactNode;
+  /** Extra text used for fuzzy matching (case number, email, etc.) */
+  keywords?: string;
+  disabled?: boolean;
+}
+
+interface SearchableSelectProps {
+  value?: string | null;
+  onValueChange: (value: string) => void;
+  options: SearchableSelectOption[];
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyText?: string;
+  disabled?: boolean;
+  className?: string;
+  triggerClassName?: string;
+  /** Width of popover content. Default: trigger width via "w-[--radix-popover-trigger-width]" */
+  contentClassName?: string;
+  /** Optional element rendered above the list (e.g. "Add new") */
+  footer?: React.ReactNode;
+}
+
+export function SearchableSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyText = "No results.",
+  disabled,
+  className,
+  triggerClassName,
+  contentClassName,
+  footer,
+}: SearchableSelectProps) {
+  const [open, setOpen] = React.useState(false);
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <div className={className}>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            disabled={disabled}
+            className={cn(
+              "w-full justify-between font-normal",
+              !selected && "text-muted-foreground",
+              triggerClassName,
+            )}
+          >
+            <span className="truncate text-left">
+              {selected ? selected.label : placeholder}
+            </span>
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className={cn("w-[--radix-popover-trigger-width] p-0", contentClassName)}
+          align="start"
+        >
+          <Command
+            filter={(itemValue, search) => {
+              const opt = options.find((o) => o.value === itemValue);
+              if (!opt) return 0;
+              const hay = `${opt.label} ${opt.keywords ?? ""}`.toLowerCase();
+              return hay.includes(search.toLowerCase()) ? 1 : 0;
+            }}
+          >
+            <CommandInput placeholder={searchPlaceholder} />
+            <CommandList>
+              <CommandEmpty>{emptyText}</CommandEmpty>
+              <CommandGroup>
+                {options.map((opt) => (
+                  <CommandItem
+                    key={opt.value}
+                    value={opt.value}
+                    disabled={opt.disabled}
+                    onSelect={(v) => {
+                      onValueChange(v);
+                      setOpen(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        value === opt.value ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    <span className="flex-1 truncate">{opt.render ?? opt.label}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              {footer}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

From c51314771f189f3e2bd06381ab4123a002497344 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:05:16 +0000
Subject: [PATCH 02/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/client-case-picker.tsx | 65 ++++++++-------------
 src/components/forms/form-pickers.tsx       | 50 +++++-----------
 2 files changed, 39 insertions(+), 76 deletions(-)

diff --git a/src/components/forms/client-case-picker.tsx b/src/components/forms/client-case-picker.tsx
index 1ca4bbe..89dd0cd 100644
--- a/src/components/forms/client-case-picker.tsx
+++ b/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>
   );
diff --git a/src/components/forms/form-pickers.tsx b/src/components/forms/form-pickers.tsx
index d0048d5..d62b105 100644
--- a/src/components/forms/form-pickers.tsx
+++ b/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>

From f5404ea7e6c1c0795c9ed1117c1fbd50c7e90f66 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:05:42 +0000
Subject: [PATCH 03/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/timer/header-timer.tsx | 90 ++++++++++++---------------
 1 file changed, 39 insertions(+), 51 deletions(-)

diff --git a/src/components/timer/header-timer.tsx b/src/components/timer/header-timer.tsx
index 98031ba..efbe94c 100644
--- a/src/components/timer/header-timer.tsx
+++ b/src/components/timer/header-timer.tsx
@@ -12,13 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { Pause, Play, Square, Timer as TimerIcon, Loader2, X, PlusCircle } from "lucide-react";
 import { toast } from "sonner";
 import { NewFeeItemDialog } from "@/components/fees/new-fee-item-dialog";
@@ -209,44 +203,37 @@ export function HeaderTimer() {
         <div className="p-4 space-y-3">
           <div className="space-y-1.5">
             <Label className="text-xs">Client</Label>
-            <Select
+            <SearchableSelect
               value={timer.clientId ?? ""}
               onValueChange={(v) => setClient(v || null)}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder="Select client" />
-              </SelectTrigger>
-              <SelectContent>
-                {clients.map((c) => (
-                  <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
+              placeholder="Select client"
+              searchPlaceholder="Search clients…"
+              emptyText="No clients found."
+              options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+            />
           </div>
 
           <div className="space-y-1.5">
             <Label className="text-xs">Case</Label>
-            <Select
+            <SearchableSelect
               value={timer.caseId ?? ""}
               onValueChange={(v) => setCase(v || null)}
               disabled={!timer.clientId}
-            >
-              <SelectTrigger>
-                <SelectValue placeholder={timer.clientId ? "Select case" : "Pick a client first"} />
-              </SelectTrigger>
-              <SelectContent>
-                {filteredCases.length === 0 ? (
-                  <div className="px-2 py-1.5 text-xs text-muted-foreground">No cases for this client.</div>
-                ) : (
-                  filteredCases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      <span className="text-muted-foreground mr-2">{c.case_number}</span>
-                      {c.title}
-                    </SelectItem>
-                  ))
-                )}
-              </SelectContent>
-            </Select>
+              placeholder={timer.clientId ? "Select case" : "Pick a client first"}
+              searchPlaceholder="Search cases…"
+              emptyText="No cases for this client."
+              options={filteredCases.map((c) => ({
+                value: c.id,
+                label: `${c.case_number} — ${c.title}`,
+                keywords: `${c.case_number} ${c.title}`,
+                render: (
+                  <span>
+                    <span className="text-muted-foreground mr-2">{c.case_number}</span>
+                    {c.title}
+                  </span>
+                ),
+              }))}
+            />
           </div>
 
           <div className="space-y-1.5">
@@ -263,26 +250,27 @@ export function HeaderTimer() {
               </Button>
             </div>
             {feeItems.length > 0 ? (
-              <Select
-                value={feeItemId || "__none"}
-                onValueChange={(v) => handleSelectFee(v === "__none" ? "" : v)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="No fee item" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none">No fee item</SelectItem>
-                  {feeItems.map((f) => (
-                    <SelectItem key={f.id} value={f.id}>
+              <SearchableSelect
+                value={feeItemId}
+                onValueChange={(v) => handleSelectFee(v)}
+                placeholder="No fee item"
+                searchPlaceholder="Search fee items…"
+                emptyText="No fee items found."
+                options={feeItems.map((f) => ({
+                  value: f.id,
+                  label: `${f.name} — ${formatCurrency(f.amount)}${f.pricing_type === "flat" ? " flat" : "/hr"}`,
+                  keywords: `${f.name} ${f.description ?? ""}`,
+                  render: (
+                    <span>
                       <span className="mr-2">{f.name}</span>
                       <span className="text-muted-foreground">
                         {formatCurrency(f.amount)}
                         {f.pricing_type === "flat" ? " flat" : "/hr"}
                       </span>
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                    </span>
+                  ),
+                }))}
+              />
             ) : (
               <p className="text-[11px] text-muted-foreground">
                 No saved items yet. Click "Add new item" to save one for reuse.

From 5454180a2017a5164253cacd81a4ca3189f08312 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:05:57 +0000
Subject: [PATCH 04/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/quick-add/quick-add.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/quick-add/quick-add.tsx b/src/components/quick-add/quick-add.tsx
index d65b38e..ab84d80 100644
--- a/src/components/quick-add/quick-add.tsx
+++ b/src/components/quick-add/quick-add.tsx
@@ -15,13 +15,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { Clock, Loader2, Plus, Receipt as ReceiptIcon } from "lucide-react";
 import { toast } from "sonner";
 import { roundToTenth } from "@/lib/timer";

From 23b6bf36490fec08e9e27661baa0092c49ec197b 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:06:20 +0000
Subject: [PATCH 05/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/quick-add/quick-add.tsx | 63 ++++++++++++--------------
 1 file changed, 30 insertions(+), 33 deletions(-)

diff --git a/src/components/quick-add/quick-add.tsx b/src/components/quick-add/quick-add.tsx
index ab84d80..023be27 100644
--- a/src/components/quick-add/quick-add.tsx
+++ b/src/components/quick-add/quick-add.tsx
@@ -175,40 +175,41 @@ export function QuickAddTime() {
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
               <Label className="text-xs">Client</Label>
-              <Select
+              <SearchableSelect
                 value={form.clientId}
                 onValueChange={(v) => setForm({ ...form, clientId: v, caseId: "" })}
-              >
-                <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
-                <SelectContent>
-                  {clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
-                </SelectContent>
-              </Select>
+                placeholder="Select"
+                searchPlaceholder="Search clients…"
+                emptyText="No clients found."
+                options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+              />
             </div>
             <div className="space-y-1.5">
               <Label className="text-xs">Case</Label>
-              <Select
+              <SearchableSelect
                 value={form.caseId}
                 onValueChange={(v) => setForm({ ...form, caseId: v })}
                 disabled={!form.clientId}
-              >
-                <SelectTrigger><SelectValue placeholder={form.clientId ? "Select" : "Pick client"} /></SelectTrigger>
-                <SelectContent>
-                  {filteredCases.length === 0 ? (
-                    <div className="px-2 py-1.5 text-xs text-muted-foreground">No cases.</div>
-                  ) : filteredCases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
+                placeholder={form.clientId ? "Select" : "Pick client"}
+                searchPlaceholder="Search cases…"
+                emptyText="No cases."
+                options={filteredCases.map((c) => ({
+                  value: c.id,
+                  label: `${c.case_number} ${c.title}`,
+                  keywords: `${c.case_number} ${c.title}`,
+                  render: (
+                    <span>
                       <span className="text-muted-foreground mr-2">{c.case_number}</span>{c.title}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                    </span>
+                  ),
+                }))}
+              />
             </div>
           </div>
           {fees.length > 0 && (
             <div className="space-y-1.5">
               <Label className="text-xs">Fee item (optional)</Label>
-              <Select
+              <SearchableSelect
                 value={feeId}
                 onValueChange={(v) => {
                   setFeeId(v);
@@ -224,19 +225,15 @@ export function QuickAddTime() {
                     }));
                   }
                 }}
-              >
-                <SelectTrigger><SelectValue placeholder="Pick from fee schedule…" /></SelectTrigger>
-                <SelectContent>
-                  {fees.map((f) => (
-                    <SelectItem key={f.id} value={f.id}>
-                      {f.name}
-                      {Number(f.amount) > 0
-                        ? ` — $${Number(f.amount).toFixed(2)}/hr`
-                        : " — uses your default rate"}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="Pick from fee schedule…"
+                searchPlaceholder="Search fee items…"
+                emptyText="No fee items."
+                options={fees.map((f) => ({
+                  value: f.id,
+                  label: `${f.name}${Number(f.amount) > 0 ? ` — $${Number(f.amount).toFixed(2)}/hr` : " — uses your default rate"}`,
+                  keywords: `${f.name} ${f.description ?? ""}`,
+                }))}
+              />
             </div>
           )}
           <div className="grid grid-cols-3 gap-3">

From 3821928699578cd951e9d79d34ddfd849e772515 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:06:47 +0000
Subject: [PATCH 06/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/quick-add/quick-add.tsx | 62 +++++++++++++-------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/components/quick-add/quick-add.tsx b/src/components/quick-add/quick-add.tsx
index 023be27..5e88b6c 100644
--- a/src/components/quick-add/quick-add.tsx
+++ b/src/components/quick-add/quick-add.tsx
@@ -231,7 +231,7 @@ export function QuickAddTime() {
                 options={fees.map((f) => ({
                   value: f.id,
                   label: `${f.name}${Number(f.amount) > 0 ? ` — $${Number(f.amount).toFixed(2)}/hr` : " — uses your default rate"}`,
-                  keywords: `${f.name} ${f.description ?? ""}`,
+                  keywords: f.name,
                 }))}
               />
             </div>
@@ -357,40 +357,41 @@ export function QuickAddExpense() {
           <div className="grid grid-cols-2 gap-3">
             <div className="space-y-1.5">
               <Label className="text-xs">Client</Label>
-              <Select
+              <SearchableSelect
                 value={form.clientId}
                 onValueChange={(v) => setForm({ ...form, clientId: v, caseId: "" })}
-              >
-                <SelectTrigger><SelectValue placeholder="Select" /></SelectTrigger>
-                <SelectContent>
-                  {clients.map((c) => <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>)}
-                </SelectContent>
-              </Select>
+                placeholder="Select"
+                searchPlaceholder="Search clients…"
+                emptyText="No clients found."
+                options={clients.map((c) => ({ value: c.id, label: c.name, keywords: c.name }))}
+              />
             </div>
             <div className="space-y-1.5">
               <Label className="text-xs">Case</Label>
-              <Select
+              <SearchableSelect
                 value={form.caseId}
                 onValueChange={(v) => setForm({ ...form, caseId: v })}
                 disabled={!form.clientId}
-              >
-                <SelectTrigger><SelectValue placeholder={form.clientId ? "Select" : "Pick client"} /></SelectTrigger>
-                <SelectContent>
-                  {filteredCases.length === 0 ? (
-                    <div className="px-2 py-1.5 text-xs text-muted-foreground">No cases.</div>
-                  ) : filteredCases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
+                placeholder={form.clientId ? "Select" : "Pick client"}
+                searchPlaceholder="Search cases…"
+                emptyText="No cases."
+                options={filteredCases.map((c) => ({
+                  value: c.id,
+                  label: `${c.case_number} ${c.title}`,
+                  keywords: `${c.case_number} ${c.title}`,
+                  render: (
+                    <span>
                       <span className="text-muted-foreground mr-2">{c.case_number}</span>{c.title}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                    </span>
+                  ),
+                }))}
+              />
             </div>
           </div>
           {fees.length > 0 && (
             <div className="space-y-1.5">
               <Label className="text-xs">Fee item (optional)</Label>
-              <Select
+              <SearchableSelect
                 value={feeId}
                 onValueChange={(v) => {
                   setFeeId(v);
@@ -404,16 +405,15 @@ export function QuickAddExpense() {
                     }));
                   }
                 }}
-              >
-                <SelectTrigger><SelectValue placeholder="Pick from fee schedule…" /></SelectTrigger>
-                <SelectContent>
-                  {fees.map((f) => (
-                    <SelectItem key={f.id} value={f.id}>
-                      {f.name} — ${Number(f.amount).toFixed(2)}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="Pick from fee schedule…"
+                searchPlaceholder="Search fee items…"
+                emptyText="No fee items."
+                options={fees.map((f) => ({
+                  value: f.id,
+                  label: `${f.name} — $${Number(f.amount).toFixed(2)}`,
+                  keywords: f.name,
+                }))}
+              />
             </div>
           )}
           <div className="grid grid-cols-2 gap-3">

From 838eb5ae1984a9dbc1c6a4d7cbd8a34b41245df5 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:07:09 +0000
Subject: [PATCH 07/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/expenses-tab.tsx | 23 ++++++++++------------
 src/components/cases/time-tab.tsx     | 28 ++++++++++-----------------
 2 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/src/components/cases/expenses-tab.tsx b/src/components/cases/expenses-tab.tsx
index 193b6b4..f56b681 100644
--- a/src/components/cases/expenses-tab.tsx
+++ b/src/components/cases/expenses-tab.tsx
@@ -173,7 +173,7 @@ export function CaseExpensesTab({ caseId }: { caseId: string }) {
             {fees.length > 0 && (
               <div className="mb-3 space-y-1.5">
                 <Label className="text-xs">Fee schedule (optional)</Label>
-                <Select
+                <SearchableSelect
                   value={selectedFeeId}
                   onValueChange={(v) => {
                     setSelectedFeeId(v);
@@ -187,18 +187,15 @@ export function CaseExpensesTab({ caseId }: { caseId: string }) {
                       }));
                     }
                   }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Pick from the fee schedule…" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {fees.map((f) => (
-                      <SelectItem key={f.id} value={f.id}>
-                        {f.name} — {formatCurrency(Number(f.amount))}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  placeholder="Pick from the fee schedule…"
+                  searchPlaceholder="Search fee items…"
+                  emptyText="No fee items found."
+                  options={fees.map((f) => ({
+                    value: f.id,
+                    label: `${f.name} — ${formatCurrency(Number(f.amount))}`,
+                    keywords: `${f.name} ${f.description ?? ""}`,
+                  }))}
+                />
               </div>
             )}
             <form onSubmit={submit} className="grid grid-cols-1 md:grid-cols-4 gap-3">
diff --git a/src/components/cases/time-tab.tsx b/src/components/cases/time-tab.tsx
index 79d5c14..dcf96f2 100644
--- a/src/components/cases/time-tab.tsx
+++ b/src/components/cases/time-tab.tsx
@@ -203,14 +203,12 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {
                 </Button>
               </div>
               {fees.length > 0 && (
-                <Select
+                <SearchableSelect
                   value={selectedFeeId}
                   onValueChange={(v) => {
                     setSelectedFeeId(v);
                     const fee = fees.find((f) => f.id === v);
                     if (fee) {
-                      // If the fee item has no rate set (0), fall back to the
-                      // case's default rate or the user's profile hourly rate.
                       const fallback =
                         caseRecord.default_hourly_rate ?? profileRate ?? 0;
                       const rate = Number(fee.amount) > 0 ? fee.amount : fallback;
@@ -222,21 +220,15 @@ export function CaseTimeTab({ caseRecord, onInvoice }: CaseTimeTabProps) {
                       }));
                     }
                   }}
-                >
-                  <SelectTrigger>
-                    <SelectValue placeholder="Pick a rate from the fee schedule…" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {fees.map((f) => (
-                      <SelectItem key={f.id} value={f.id}>
-                        {f.name}
-                        {Number(f.amount) > 0
-                          ? ` — ${formatCurrency(Number(f.amount))}/hr`
-                          : " — uses your default rate"}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  placeholder="Pick a rate from the fee schedule…"
+                  searchPlaceholder="Search fee items…"
+                  emptyText="No fee items found."
+                  options={fees.map((f) => ({
+                    value: f.id,
+                    label: `${f.name}${Number(f.amount) > 0 ? ` — ${formatCurrency(Number(f.amount))}/hr` : " — uses your default rate"}`,
+                    keywords: `${f.name} ${f.description ?? ""}`,
+                  }))}
+                />
               )}
             </div>
             <form onSubmit={submit} className="grid grid-cols-1 md:grid-cols-5 gap-3">

From ab13d1edd7f0db4c232d421845cb99114a83448c 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:07:20 +0000
Subject: [PATCH 08/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/expenses-tab.tsx | 1 +
 src/components/cases/time-tab.tsx     | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/components/cases/expenses-tab.tsx b/src/components/cases/expenses-tab.tsx
index f56b681..df6aae0 100644
--- a/src/components/cases/expenses-tab.tsx
+++ b/src/components/cases/expenses-tab.tsx
@@ -17,6 +17,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 
 interface FeeItem {
   id: string;
diff --git a/src/components/cases/time-tab.tsx b/src/components/cases/time-tab.tsx
index dcf96f2..2c0b722 100644
--- a/src/components/cases/time-tab.tsx
+++ b/src/components/cases/time-tab.tsx
@@ -19,6 +19,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { NewFeeItemDialog } from "@/components/fees/new-fee-item-dialog";
 
 interface FeeItem {

From c2fc933bb59002e5c3045dd70fe8ad8e79c7d1b9 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:07:43 +0000
Subject: [PATCH 09/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/cases/collections-tab.tsx        | 1 +
 src/components/forms/form-fields-fill-panel.tsx | 1 +
 src/components/forms/letter-generator.tsx       | 1 +
 src/components/tasks/new-task-dialog.tsx        | 1 +
 src/routes/cases.new.tsx                        | 1 +
 src/routes/documents.pleading.new.tsx           | 1 +
 src/routes/status.index.tsx                     | 1 +
 7 files changed, 7 insertions(+)

diff --git a/src/components/cases/collections-tab.tsx b/src/components/cases/collections-tab.tsx
index fac886d..6070458 100644
--- a/src/components/cases/collections-tab.tsx
+++ b/src/components/cases/collections-tab.tsx
@@ -20,6 +20,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import {
   Table,
   TableBody,
diff --git a/src/components/forms/form-fields-fill-panel.tsx b/src/components/forms/form-fields-fill-panel.tsx
index 2655d68..a419286 100644
--- a/src/components/forms/form-fields-fill-panel.tsx
+++ b/src/components/forms/form-fields-fill-panel.tsx
@@ -9,6 +9,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import {
   fetchClients,
   fetchHomeowners,
diff --git a/src/components/forms/letter-generator.tsx b/src/components/forms/letter-generator.tsx
index 9059b3e..3e2cdc1 100644
--- a/src/components/forms/letter-generator.tsx
+++ b/src/components/forms/letter-generator.tsx
@@ -11,6 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { FileDown } from "lucide-react";
 import {
   applyVariables,
diff --git a/src/components/tasks/new-task-dialog.tsx b/src/components/tasks/new-task-dialog.tsx
index 3b2b092..93ee063 100644
--- a/src/components/tasks/new-task-dialog.tsx
+++ b/src/components/tasks/new-task-dialog.tsx
@@ -18,6 +18,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import {
   Popover,
   PopoverContent,
diff --git a/src/routes/cases.new.tsx b/src/routes/cases.new.tsx
index d685840..9f1e63d 100644
--- a/src/routes/cases.new.tsx
+++ b/src/routes/cases.new.tsx
@@ -9,6 +9,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
 import { ArrowLeft, Loader2 } from "lucide-react";
diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index 897c953..c305f70 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -10,6 +10,7 @@ import { Textarea } from "@/components/ui/textarea";
 import {
   Select, SelectContent, SelectItem, SelectTrigger, SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { Switch } from "@/components/ui/switch";
 import { FL_CIRCUITS } from "@/lib/florida";
 import { Packer } from "docx";
diff --git a/src/routes/status.index.tsx b/src/routes/status.index.tsx
index 1b40a95..78395d8 100644
--- a/src/routes/status.index.tsx
+++ b/src/routes/status.index.tsx
@@ -14,6 +14,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { SearchableSelect } from "@/components/ui/searchable-select";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
 import { Loader2, Send, ExternalLink } from "lucide-react";

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 10/13] 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"

From 23fbd0a2cfcaae6957dd8c7bcfe0d949c3130266 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:35 +0000
Subject: [PATCH 11/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/forms/letter-generator.tsx | 69 +++++++++++------------
 src/routes/documents.pleading.new.tsx     | 44 ++++++++-------
 2 files changed, 56 insertions(+), 57 deletions(-)

diff --git a/src/components/forms/letter-generator.tsx b/src/components/forms/letter-generator.tsx
index 3e2cdc1..bb9754a 100644
--- a/src/components/forms/letter-generator.tsx
+++ b/src/components/forms/letter-generator.tsx
@@ -349,22 +349,21 @@ export function LetterGenerator() {
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <div>
               <Label>Case (optional)</Label>
-              <Select
+              <SearchableSelect
                 value={caseId || "__none"}
                 onValueChange={(v) => setCaseId(v === "__none" ? "" : v)}
-              >
-                <SelectTrigger>
-                  <SelectValue placeholder="Link to a case" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="__none">— No case —</SelectItem>
-                  {cases.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.case_number} — {c.title}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+                placeholder="Link to a case"
+                searchPlaceholder="Search cases…"
+                emptyText="No cases found."
+                options={[
+                  { value: "__none", label: "— No case —" },
+                  ...cases.map((c) => ({
+                    value: c.id,
+                    label: `${c.case_number} — ${c.title}`,
+                    keywords: `${c.case_number} ${c.title}`,
+                  })),
+                ]}
+              />
             </div>
             <div>
               <Label>
@@ -375,29 +374,25 @@ export function LetterGenerator() {
                   </span>
                 ) : null}
               </Label>
-              <Select value={recipientId} onValueChange={setRecipientId}>
-                <SelectTrigger>
-                  <SelectValue placeholder="Select a contact" />
-                </SelectTrigger>
-                <SelectContent>
-                  {sortedContacts.linked.length > 0 && (
-                    <>
-                      {sortedContacts.linked.map((c) => (
-                        <SelectItem key={c.id} value={c.id}>
-                          ★ {c.name}
-                          {c.company ? ` — ${c.company}` : ""}
-                        </SelectItem>
-                      ))}
-                    </>
-                  )}
-                  {sortedContacts.others.map((c) => (
-                    <SelectItem key={c.id} value={c.id}>
-                      {c.name}
-                      {c.company ? ` — ${c.company}` : ""}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+              <SearchableSelect
+                value={recipientId}
+                onValueChange={setRecipientId}
+                placeholder="Select a contact"
+                searchPlaceholder="Search contacts…"
+                emptyText="No contacts found."
+                options={[
+                  ...sortedContacts.linked.map((c) => ({
+                    value: c.id,
+                    label: `★ ${c.name}${c.company ? ` — ${c.company}` : ""}`,
+                    keywords: `${c.name} ${c.company ?? ""}`,
+                  })),
+                  ...sortedContacts.others.map((c) => ({
+                    value: c.id,
+                    label: `${c.name}${c.company ? ` — ${c.company}` : ""}`,
+                    keywords: `${c.name} ${c.company ?? ""}`,
+                  })),
+                ]}
+              />
             </div>
           </div>
           <div>
diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index c305f70..c908e63 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -333,6 +333,7 @@ function PleadingNewPage() {
               <div className="space-y-1.5">
                 <Label className="text-xs">Client</Label>
                 <Select
+                <SearchableSelect
                   value={clientId || "__none__"}
                   onValueChange={(v) => {
                     const next = v === "__none__" ? "" : v;
@@ -342,29 +343,32 @@ function PleadingNewPage() {
                       if (k && k.client_id !== next) setCaseId("");
                     }
                   }}
-                >
-                  <SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
-                  <SelectContent className="max-h-72">
-                    <SelectItem value="__none__">— None —</SelectItem>
-                    {clientOptions.map((c) => (
-                      <SelectItem key={c.id} value={c.id}>{c.name}</SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                  placeholder="None"
+                  searchPlaceholder="Search clients…"
+                  emptyText="No clients found."
+                  options={[
+                    { value: "__none__", label: "— None —" },
+                    ...clientOptions.map((c) => ({ value: c.id, label: c.name, keywords: c.name })),
+                  ]}
+                />
               </div>
               <div className="space-y-1.5">
                 <Label className="text-xs">Case</Label>
-                <Select value={caseId || "__none__"} onValueChange={(v) => setCaseId(v === "__none__" ? "" : v)}>
-                  <SelectTrigger><SelectValue placeholder="None" /></SelectTrigger>
-                  <SelectContent className="max-h-72">
-                    <SelectItem value="__none__">— None —</SelectItem>
-                    {filteredCases.map((k) => (
-                      <SelectItem key={k.id} value={k.id}>
-                        {k.case_number} — {k.title}
-                      </SelectItem>
-                    ))}
-                  </SelectContent>
-                </Select>
+                <SearchableSelect
+                  value={caseId || "__none__"}
+                  onValueChange={(v) => setCaseId(v === "__none__" ? "" : v)}
+                  placeholder="None"
+                  searchPlaceholder="Search cases…"
+                  emptyText="No cases found."
+                  options={[
+                    { value: "__none__", label: "— None —" },
+                    ...filteredCases.map((k) => ({
+                      value: k.id,
+                      label: `${k.case_number} — ${k.title}`,
+                      keywords: `${k.case_number} ${k.title}`,
+                    })),
+                  ]}
+                />
               </div>
             </div>
 

From 0459191d6b7659eb63b4ec9cc5b9f943c1d33530 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:45 +0000
Subject: [PATCH 12/13] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/documents.pleading.new.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/routes/documents.pleading.new.tsx b/src/routes/documents.pleading.new.tsx
index c908e63..24a59f1 100644
--- a/src/routes/documents.pleading.new.tsx
+++ b/src/routes/documents.pleading.new.tsx
@@ -332,7 +332,6 @@ function PleadingNewPage() {
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               <div className="space-y-1.5">
                 <Label className="text-xs">Client</Label>
-                <Select
                 <SearchableSelect
                   value={clientId || "__none__"}
                   onValueChange={(v) => {

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 13/13] 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>