Changes

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

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">