Changes

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

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