Added per hour / flat fee toggle

X-Lovable-Edit-ID: edt-41ae5810-f71d-4381-81a6-b9efeb56d287
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
@@ -284,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