From 60336af2d7f3be4754d7253da568cc16c6fcb413 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 02:10:20 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/cases.$caseId.tsx | 51 ++++++++++++++++++++----------------
 1 file changed, 29 insertions(+), 22 deletions(-)

diff --git a/src/routes/cases.$caseId.tsx b/src/routes/cases.$caseId.tsx
index a04a1a7..fff7e58 100644
--- a/src/routes/cases.$caseId.tsx
+++ b/src/routes/cases.$caseId.tsx
@@ -137,28 +137,7 @@ function CaseDetail() {
         </Card>
       )}
 
-      <Tabs defaultValue="litigation">
-        <TabsList className="mb-4 flex-wrap h-auto">
-          <TabsTrigger value="litigation"><Scale className="h-3.5 w-3.5 mr-1.5" />Litigation</TabsTrigger>
-          <TabsTrigger value="overview"><Activity className="h-3.5 w-3.5 mr-1.5" />Status log</TabsTrigger>
-          <TabsTrigger value="documents"><FileText className="h-3.5 w-3.5 mr-1.5" />Documents</TabsTrigger>
-          <TabsTrigger value="time"><Clock className="h-3.5 w-3.5 mr-1.5" />Time</TabsTrigger>
-          <TabsTrigger value="expenses"><DollarSign className="h-3.5 w-3.5 mr-1.5" />Expenses</TabsTrigger>
-          <TabsTrigger value="invoices"><Receipt className="h-3.5 w-3.5 mr-1.5" />Invoices</TabsTrigger>
-          {(data.client?.client_type === "hoa" || data.client?.client_type === "condo") && (
-            <TabsTrigger value="collections"><Users className="h-3.5 w-3.5 mr-1.5" />Collections</TabsTrigger>
-          )}
-        </TabsList>
-        <TabsContent value="litigation"><CaseLitigationTab caseRecord={data} canManage={canManage} onSaved={load} /></TabsContent>
-        <TabsContent value="overview"><CaseStatusTab caseId={caseId} caseLabel={`${data.case_number} — ${data.title}`} /></TabsContent>
-        <TabsContent value="documents"><CaseDocumentsTab caseId={caseId} /></TabsContent>
-        <TabsContent value="time"><CaseTimeTab caseRecord={data} /></TabsContent>
-        <TabsContent value="expenses"><CaseExpensesTab caseId={caseId} /></TabsContent>
-        <TabsContent value="invoices"><CaseInvoicesTab caseRecord={data} /></TabsContent>
-        {(data.client?.client_type === "hoa" || data.client?.client_type === "condo") && (
-          <TabsContent value="collections"><CaseCollectionsTab caseRecord={data} /></TabsContent>
-        )}
-      </Tabs>
+      <CaseTabs data={data} caseId={caseId} canManage={canManage} load={load} />
 
       <div className="mt-8 grid grid-cols-2 sm:grid-cols-4 gap-3 text-center text-xs">
         <SmallStat label="Default rate" value={data.default_hourly_rate ? formatCurrency(data.default_hourly_rate) + "/hr" : "—"} />
@@ -170,6 +149,34 @@ function CaseDetail() {
   );
 }
 
+function CaseTabs({ data, caseId, canManage, load }: { data: any; caseId: string; canManage: boolean; load: () => void }) {
+  const [tab, setTab] = useState("litigation");
+  return (
+    <Tabs value={tab} onValueChange={setTab}>
+      <TabsList className="mb-4 flex-wrap h-auto">
+        <TabsTrigger value="litigation"><Scale className="h-3.5 w-3.5 mr-1.5" />Litigation</TabsTrigger>
+        <TabsTrigger value="overview"><Activity className="h-3.5 w-3.5 mr-1.5" />Status log</TabsTrigger>
+        <TabsTrigger value="documents"><FileText className="h-3.5 w-3.5 mr-1.5" />Documents</TabsTrigger>
+        <TabsTrigger value="time"><Clock className="h-3.5 w-3.5 mr-1.5" />Time</TabsTrigger>
+        <TabsTrigger value="expenses"><DollarSign className="h-3.5 w-3.5 mr-1.5" />Expenses</TabsTrigger>
+        <TabsTrigger value="invoices"><Receipt className="h-3.5 w-3.5 mr-1.5" />Invoices</TabsTrigger>
+        {(data.client?.client_type === "hoa" || data.client?.client_type === "condo") && (
+          <TabsTrigger value="collections"><Users className="h-3.5 w-3.5 mr-1.5" />Collections</TabsTrigger>
+        )}
+      </TabsList>
+      <TabsContent value="litigation"><CaseLitigationTab caseRecord={data} canManage={canManage} onSaved={load} /></TabsContent>
+      <TabsContent value="overview"><CaseStatusTab caseId={caseId} caseLabel={`${data.case_number} — ${data.title}`} /></TabsContent>
+      <TabsContent value="documents"><CaseDocumentsTab caseId={caseId} /></TabsContent>
+      <TabsContent value="time"><CaseTimeTab caseRecord={data} onInvoice={() => setTab("invoices")} /></TabsContent>
+      <TabsContent value="expenses"><CaseExpensesTab caseId={caseId} /></TabsContent>
+      <TabsContent value="invoices"><CaseInvoicesTab caseRecord={data} /></TabsContent>
+      {(data.client?.client_type === "hoa" || data.client?.client_type === "condo") && (
+        <TabsContent value="collections"><CaseCollectionsTab caseRecord={data} /></TabsContent>
+      )}
+    </Tabs>
+  );
+}
+
 function SmallStat({ label, value }: { label: string; value: string }) {
   return (
     <div className="border rounded-md py-2 px-3">