From 54b2610e9a63ed9e2b9bb942d8a7672d94d3dba3 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 17 Apr 2026 00:26:53 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/cases.$caseId.tsx     | 57 ++++++++++++++++++++------------
 src/routes/clients.$clientId.tsx |  6 ++++
 2 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/routes/cases.$caseId.tsx b/src/routes/cases.$caseId.tsx
index 27741b1..19aecdb 100644
--- a/src/routes/cases.$caseId.tsx
+++ b/src/routes/cases.$caseId.tsx
@@ -18,6 +18,7 @@ import { CaseInvoicesTab } from "@/components/cases/invoices-tab";
 import { CaseLitigationTab } from "@/components/cases/litigation-tab";
 import { toast } from "sonner";
 import { useAuth } from "@/lib/auth";
+import { StartTimerButton } from "@/components/timer/start-timer-button";
 
 export const Route = createFileRoute("/cases/$caseId")({
   component: () => (
@@ -105,27 +106,41 @@ function CaseDetail() {
             {" · "}{data.practice_area || "—"}{" · "}opened {formatDate(data.opened_at)}
           </p>
         </div>
-        {canManage && (
-          <div className="flex flex-wrap gap-2">
-            <Select value={data.assigned_attorney_id ?? ""} onValueChange={updateAssignee}>
-              <SelectTrigger className="w-[200px]"><SelectValue placeholder="Assign attorney" /></SelectTrigger>
-              <SelectContent>
-                {users.map((u) => <SelectItem key={u.id} value={u.id}>{u.full_name || u.email}</SelectItem>)}
-              </SelectContent>
-            </Select>
-            <Select value={data.status} onValueChange={updateStatus}>
-              <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
-              <SelectContent>
-                <SelectItem value="intake">Intake</SelectItem>
-                <SelectItem value="active">Active</SelectItem>
-                <SelectItem value="on_hold">On hold</SelectItem>
-                <SelectItem value="closed_won">Closed — won</SelectItem>
-                <SelectItem value="closed_lost">Closed — lost</SelectItem>
-                <SelectItem value="closed">Closed</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        )}
+        <div className="flex flex-wrap gap-2">
+          <StartTimerButton
+            size="sm"
+            variant="outline"
+            target={{
+              clientId: data.client.id,
+              clientName: data.client.name,
+              caseId: data.id,
+              caseNumber: data.case_number,
+              caseTitle: data.title,
+              defaultHourlyRate: data.default_hourly_rate,
+            }}
+          />
+          {canManage && (
+            <>
+              <Select value={data.assigned_attorney_id ?? ""} onValueChange={updateAssignee}>
+                <SelectTrigger className="w-[200px]"><SelectValue placeholder="Assign attorney" /></SelectTrigger>
+                <SelectContent>
+                  {users.map((u) => <SelectItem key={u.id} value={u.id}>{u.full_name || u.email}</SelectItem>)}
+                </SelectContent>
+              </Select>
+              <Select value={data.status} onValueChange={updateStatus}>
+                <SelectTrigger className="w-[160px]"><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="intake">Intake</SelectItem>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="on_hold">On hold</SelectItem>
+                  <SelectItem value="closed_won">Closed — won</SelectItem>
+                  <SelectItem value="closed_lost">Closed — lost</SelectItem>
+                  <SelectItem value="closed">Closed</SelectItem>
+                </SelectContent>
+              </Select>
+            </>
+          )}
+        </div>
       </div>
 
       {data.description && (
diff --git a/src/routes/clients.$clientId.tsx b/src/routes/clients.$clientId.tsx
index 72ec9d9..9102758 100644
--- a/src/routes/clients.$clientId.tsx
+++ b/src/routes/clients.$clientId.tsx
@@ -10,6 +10,7 @@ import { ClientFormDialog } from "@/components/clients/client-form-dialog";
 import { useAuth } from "@/lib/auth";
 import { ArrowLeft, Edit, Plus, Building2, User, Briefcase as Building, MapPin, Mail, Phone, Users } from "lucide-react";
 import { formatDate, statusBadgeClass } from "@/lib/format";
+import { StartTimerButton } from "@/components/timer/start-timer-button";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/clients/$clientId")({
@@ -79,6 +80,11 @@ function ClientDetail() {
         description={client.management_company || client.client_type.toUpperCase()}
         actions={
           <>
+            <StartTimerButton
+              variant="outline"
+              target={{ clientId: client.id, clientName: client.name }}
+              label="Start client timer"
+            />
             {canEdit && (
               <Button variant="outline" onClick={() => setEditOpen(true)}>
                 <Edit className="h-4 w-4 mr-2" /> Edit