Changes

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

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>