From 4d60ac01759bf63ad44edee417dbd4984ccc1b26 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 16:03:10 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/components/timer/header-timer.tsx | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/components/timer/header-timer.tsx b/src/components/timer/header-timer.tsx
index 7b0d4fb..0ae77fc 100644
--- a/src/components/timer/header-timer.tsx
+++ b/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>