Changes

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

src/components/timer/header-timer.tsx

@@ -232,6 +232,29 @@ export function HeaderTimer() {
             </Select>
           </div>
 
+          {feeItems.length > 0 && (
+            <div className="space-y-1.5">
+              <Label className="text-xs">Fee item (optional)</Label>
+              <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}>
+                      <span className="mr-2">{f.name}</span>
+                      <span className="text-muted-foreground">{formatCurrency(f.amount)}/hr</span>
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          )}
+
           <div className="space-y-1.5">
             <Label className="text-xs">Description</Label>
             <Textarea
@@ -250,7 +273,13 @@ export function HeaderTimer() {
                 {effectiveRate ? `${formatCurrency(effectiveRate)}/hr` : "—"}
               </div>
               <div className="text-[10px] text-muted-foreground">
-                {activeCase?.default_hourly_rate ? "From case" : profileRate ? "Your default" : "Set rate in profile"}
+                {selectedFee
+                  ? `Fee: ${selectedFee.name}`
+                  : activeCase?.default_hourly_rate
+                    ? "From case"
+                    : profileRate
+                      ? "Your default"
+                      : "Set rate in profile"}
               </div>
             </div>
             <label className="flex items-end gap-2 text-sm pb-1">