From c5826a34d0941b7a80868982b043484ad66d6267 Mon Sep 17 00:00:00 2001
From: kibin <juankibin@gmail.com>
Date: Wed, 1 Apr 2026 07:45:02 +0000
Subject: [PATCH] fix(254): move invoice modal buttons to sticky footer

---
 app/(app)/invoices/page.tsx | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/app/(app)/invoices/page.tsx b/app/(app)/invoices/page.tsx
index 77cc8b6..6be0257 100644
--- a/app/(app)/invoices/page.tsx
+++ b/app/(app)/invoices/page.tsx
@@ -154,7 +154,20 @@ export default function InvoicesPage() {
       </Card>
 
       {/* Invoice Detail Modal */}
-      <Modal isOpen={!!selected} onClose={() => setSelected(null)} title={`Invoice ${selected?.invoiceNumber ?? ""}`} className="max-w-lg">
+      <Modal
+        isOpen={!!selected}
+        onClose={() => setSelected(null)}
+        title={`Invoice ${selected?.invoiceNumber ?? ""}`}
+        className="max-w-lg"
+        footer={selected ? (
+          <>
+            {selected.status !== "VOID" && selected.status !== "PAID" && (
+              <Button variant="danger" size="sm" onClick={() => voidInvoice.mutate(selected.id)} isLoading={voidInvoice.isPending}>Void Invoice</Button>
+            )}
+            <Button variant="outline" size="sm" onClick={() => setSelected(null)}>Close</Button>
+          </>
+        ) : undefined}
+      >
         {selected && (
           <div className="space-y-4">
             <div className="bg-gray-50 rounded-lg p-4 space-y-2 text-sm">
@@ -196,13 +209,6 @@ export default function InvoicesPage() {
                   disabled={!payForm.amount}>Record Payment</Button>
               </div>
             )}
-
-            <div className="flex justify-between pt-1">
-              {selected.status !== "VOID" && selected.status !== "PAID" && (
-                <Button variant="danger" size="sm" onClick={() => voidInvoice.mutate(selected.id)} isLoading={voidInvoice.isPending}>Void Invoice</Button>
-              )}
-              <Button variant="outline" size="sm" onClick={() => setSelected(null)} className="ml-auto">Close</Button>
-            </div>
           </div>
         )}
       </Modal>