From 5e80ae585bb53b1006050589c15f9ea99a21d858 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 11 May 2026 20:42:03 +0000
Subject: [PATCH] Changes

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

diff --git a/src/components/timer/header-timer.tsx b/src/components/timer/header-timer.tsx
index 506d2b1..be21767 100644
--- a/src/components/timer/header-timer.tsx
+++ b/src/components/timer/header-timer.tsx
@@ -296,6 +296,44 @@ export function HeaderTimer() {
             )}
           </div>
 
+          <div className="space-y-1.5">
+            <Label className="text-xs">Billing</Label>
+            <div className="flex items-center gap-2">
+              <ToggleGroup
+                type="single"
+                value={pricingMode}
+                onValueChange={(v) => v && setPricingMode(v as "hourly" | "flat")}
+                className="justify-start"
+              >
+                <ToggleGroupItem value="hourly" size="sm" className="h-8 px-3 text-xs">
+                  Per hour
+                </ToggleGroupItem>
+                <ToggleGroupItem value="flat" size="sm" className="h-8 px-3 text-xs">
+                  Flat fee
+                </ToggleGroupItem>
+              </ToggleGroup>
+              <div className="relative flex-1">
+                <span className="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-muted-foreground">
+                  $
+                </span>
+                <Input
+                  type="number"
+                  min="0"
+                  step="0.01"
+                  inputMode="decimal"
+                  placeholder={
+                    isFlatFee
+                      ? "Amount"
+                      : (activeCase?.default_hourly_rate ?? profileRate ?? 0).toString() || "Rate"
+                  }
+                  value={customAmount}
+                  onChange={(e) => setCustomAmount(e.target.value)}
+                  className="h-8 pl-5 text-sm"
+                />
+              </div>
+            </div>
+          </div>
+
           <div className="space-y-1.5">
             <Label className="text-xs">Description</Label>
             <Textarea