Changes

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

src/components/timer/header-timer.tsx

@@ -7,6 +7,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Checkbox } from "@/components/ui/checkbox";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import {
   Popover,
   PopoverContent,
@@ -50,6 +51,8 @@ export function HeaderTimer() {
   const [feeItems, setFeeItems] = useState<FeeItem[]>([]);
   const [feeItemId, setFeeItemId] = useState<string>("");
   const [showNewFee, setShowNewFee] = useState(false);
+  const [pricingMode, setPricingMode] = useState<"hourly" | "flat">("hourly");
+  const [customAmount, setCustomAmount] = useState<string>("");
   const [staff, setStaff] = useState<Array<{ id: string; full_name: string | null; email: string | null }>>([]);
   const [enteredById, setEnteredById] = useState<string>("");
 
@@ -98,13 +101,16 @@ export function HeaderTimer() {
     [feeItems, feeItemId],
   );
 
-  const isFlatFee = selectedFee?.pricing_type === "flat";
+  const isFlatFee = pricingMode === "flat" || selectedFee?.pricing_type === "flat";
 
   // If a fee item has no rate (0), fall back to the case rate then the user's
   // profile rate. Flat-fee items always use their own amount.
+  const customAmountNum = Number(customAmount);
+  const hasCustomAmount = customAmount !== "" && !Number.isNaN(customAmountNum) && customAmountNum > 0;
   const feeRate = selectedFee && Number(selectedFee.amount) > 0 ? selectedFee.amount : null;
-  const effectiveRate =
-    feeRate ?? activeCase?.default_hourly_rate ?? profileRate ?? 0;
+  const effectiveRate = hasCustomAmount
+    ? customAmountNum
+    : (feeRate ?? activeCase?.default_hourly_rate ?? profileRate ?? 0);
 
   const handleSelectFee = (id: string) => {
     setFeeItemId(id);
@@ -112,6 +118,7 @@ export function HeaderTimer() {
     if (fee && !timer.description.trim()) {
       setDescription(fee.description?.trim() || fee.name);
     }
+    if (fee) setPricingMode(fee.pricing_type);
   };
 
   const handleSave = async () => {
@@ -119,11 +126,12 @@ export function HeaderTimer() {
     if (!timer.caseId) return toast.error("Select a case before saving");
     if (!timer.description.trim()) return toast.error("Description required");
     if (elapsedMs < 1000 && !isFlatFee) return toast.error("Timer hasn't recorded any time yet");
+    if (isFlatFee && !(effectiveRate > 0)) return toast.error("Enter a flat fee amount");
     setSaving(true);
     const { hours: tracked } = consume();
     // For a flat-fee item, store 1 hour at the flat amount so the total = flat amount.
     const hours = isFlatFee ? 1 : tracked;
-    const rate = isFlatFee ? selectedFee!.amount : effectiveRate;
+    const rate = effectiveRate;
     const { error } = await supabase.from("time_entries").insert({
       case_id: timer.caseId,
       user_id: enteredById || user.id,
@@ -148,6 +156,8 @@ export function HeaderTimer() {
     );
     setBillable(true);
     setFeeItemId("");
+    setPricingMode("hourly");
+    setCustomAmount("");
     setEnteredById(user.id);
     setOpen(false);
   };
@@ -157,6 +167,8 @@ export function HeaderTimer() {
     reset();
     setBillable(true);
     setFeeItemId("");
+    setPricingMode("hourly");
+    setCustomAmount("");
   };
 
   const dotClass = isRunning