From 0dbb0fbf12a88e17cffd5d133f70cb7a73c41a42 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 18 Apr 2026 01:09:54 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/invoices.$invoiceId.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/routes/invoices.$invoiceId.tsx b/src/routes/invoices.$invoiceId.tsx
index 72ead90..1471ea7 100644
--- a/src/routes/invoices.$invoiceId.tsx
+++ b/src/routes/invoices.$invoiceId.tsx
@@ -12,10 +12,11 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
 import { supabase } from "@/integrations/supabase/client";
 import { useAuth } from "@/lib/auth";
-import { ArrowLeft, FileDown, Plus, Trash2, Loader2, Send, Ban, CheckCircle2, DollarSign } from "lucide-react";
+import { ArrowLeft, FileDown, Plus, Trash2, Loader2, Send, Ban, CheckCircle2, DollarSign, Wallet } from "lucide-react";
 import { formatCurrency, formatDate, statusBadgeClass } from "@/lib/format";
 import { downloadInvoicePdf, type InvoicePdfInput } from "@/lib/invoice-pdf";
 import { recalcInvoiceTotals } from "@/lib/invoice-generation";
+import { ApplyTrustDialog } from "@/components/trust/trust-account-panel";
 import { toast } from "sonner";
 
 export const Route = createFileRoute("/invoices/$invoiceId")({
@@ -37,6 +38,7 @@ function InvoiceDetail() {
   const [loading, setLoading] = useState(true);
   const [savingItem, setSavingItem] = useState(false);
   const [payOpen, setPayOpen] = useState(false);
+  const [trustOpen, setTrustOpen] = useState(false);
 
   const load = async () => {
     setLoading(true);
@@ -269,6 +271,11 @@ function InvoiceDetail() {
           <div className="flex items-center gap-3 mb-1">
             <span className="text-xs uppercase tracking-widest text-muted-foreground">Invoice</span>
             <Badge variant="outline" className={statusBadgeClass(invoice.status)}>{invoice.status}</Badge>
+            {invoice.is_retainer && (
+              <Badge variant="outline" className="border-emerald-500/40 text-emerald-700 dark:text-emerald-400">
+                <Wallet className="h-3 w-3 mr-1" /> Retainer
+              </Badge>
+            )}
           </div>
           <h1 className="font-serif text-3xl">{invoice.invoice_number}</h1>
           <p className="text-sm text-muted-foreground mt-1">
@@ -290,6 +297,11 @@ function InvoiceDetail() {
           {canEdit && invoice.status !== "void" && invoice.status !== "paid" && (
             <Button variant="outline" onClick={() => setStatus("void")}><Ban className="h-4 w-4 mr-2" /> Void</Button>
           )}
+          {canEdit && balance > 0 && !invoice.is_retainer && (
+            <Button variant="outline" onClick={() => setTrustOpen(true)}>
+              <Wallet className="h-4 w-4 mr-2" /> Apply trust funds
+            </Button>
+          )}
           {canEdit && (
             <Button onClick={() => setPayOpen(true)}><DollarSign className="h-4 w-4 mr-2" /> Record payment</Button>
           )}
@@ -476,6 +488,19 @@ function InvoiceDetail() {
         userId={user?.id ?? ""}
         onSaved={load}
       />
+
+      {invoice.client?.id && (
+        <ApplyTrustDialog
+          open={trustOpen}
+          onOpenChange={setTrustOpen}
+          clientId={invoice.client.id}
+          invoiceId={invoiceId}
+          invoiceNumber={invoice.invoice_number}
+          balanceDue={balance}
+          userId={user?.id ?? null}
+          onApplied={load}
+        />
+      )}
     </PageContainer>
   );
 }