Changes

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

src/components/timer/header-timer.tsx

@@ -245,9 +245,20 @@ export function HeaderTimer() {
             </Select>
           </div>
 
-          {feeItems.length > 0 && (
-            <div className="space-y-1.5">
+          <div className="space-y-1.5">
+            <div className="flex items-center justify-between">
               <Label className="text-xs">Fee item (optional)</Label>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                className="h-6 text-xs px-2"
+                onClick={() => setShowNewFee(true)}
+              >
+                <PlusCircle className="h-3.5 w-3.5 mr-1" /> Add new item
+              </Button>
+            </div>
+            {feeItems.length > 0 ? (
               <Select
                 value={feeItemId || "__none"}
                 onValueChange={(v) => handleSelectFee(v === "__none" ? "" : v)}
@@ -268,8 +279,12 @@ export function HeaderTimer() {
                   ))}
                 </SelectContent>
               </Select>
-            </div>
-          )}
+            ) : (
+              <p className="text-[11px] text-muted-foreground">
+                No saved items yet. Click "Add new item" to save one for reuse.
+              </p>
+            )}
+          </div>
 
           <div className="space-y-1.5">
             <Label className="text-xs">Description</Label>