From 7953a5e9d0e3f97e1448fc85355feeb3f7698f07 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:37:39 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/clients.$clientId.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/routes/clients.$clientId.tsx b/src/routes/clients.$clientId.tsx
index fb99528..ae6435c 100644
--- a/src/routes/clients.$clientId.tsx
+++ b/src/routes/clients.$clientId.tsx
@@ -9,11 +9,12 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { supabase } from "@/integrations/supabase/client";
 import { ClientFormDialog } from "@/components/clients/client-form-dialog";
 import { useAuth } from "@/lib/auth";
-import { ArrowLeft, Edit, Plus, Building2, User, MapPin, Mail, Phone, Users, Activity, Briefcase, FileDown, Contact } from "lucide-react";
+import { ArrowLeft, Edit, Plus, Building2, User, MapPin, Mail, Phone, Users, Activity, Briefcase, FileDown, Contact, Receipt } from "lucide-react";
 import { ContactsLinkTab } from "@/components/contacts/contacts-link-tab";
 import { formatCurrency, formatDate, formatDateTime, statusBadgeClass } from "@/lib/format";
 import { toast } from "sonner";
 import { downloadStatusReport } from "@/lib/status-pdf";
+import { GenerateInvoiceDialog } from "@/components/invoices/generate-invoice-dialog";
 
 export const Route = createFileRoute("/clients/$clientId")({
   component: () => (
@@ -32,6 +33,7 @@ function ClientDetail() {
   const [statusEntries, setStatusEntries] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
   const [editOpen, setEditOpen] = useState(false);
+  const [invoiceOpen, setInvoiceOpen] = useState(false);
 
   const load = async () => {
     setLoading(true);
@@ -125,6 +127,9 @@ function ClientDetail() {
                 <Edit className="h-4 w-4 mr-2" /> Edit
               </Button>
             )}
+            <Button variant="outline" onClick={() => setInvoiceOpen(true)}>
+              <Receipt className="h-4 w-4 mr-2" /> Generate invoice
+            </Button>
             <Button onClick={() => navigate({ to: "/cases/new", search: { clientId: client.id } })}>
               <Plus className="h-4 w-4 mr-2" /> New case
             </Button>
@@ -286,6 +291,12 @@ function ClientDetail() {
       </div>
 
       <ClientFormDialog open={editOpen} onOpenChange={setEditOpen} client={client} onSaved={load} />
+      <GenerateInvoiceDialog
+        open={invoiceOpen}
+        onOpenChange={setInvoiceOpen}
+        clientId={client.id}
+        clientName={client.name}
+      />
     </PageContainer>
   );
 }