fix(254): invoice modal scrollable with sticky footer buttons (#25)

This commit was merged in pull request #25.
This commit is contained in:
2026-04-01 07:53:26 +00:00
parent e582eb1693
commit 34549fc4b6
2 changed files with 24 additions and 12 deletions

View File

@@ -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>