Changes

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

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

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