From 564c7ed171f5f68289b9ccd611cfd53ded63b592 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 19 Apr 2026 17:52:48 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 src/routes/payments.index.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/routes/payments.index.tsx b/src/routes/payments.index.tsx
index 5d217f9..e14df67 100644
--- a/src/routes/payments.index.tsx
+++ b/src/routes/payments.index.tsx
@@ -17,7 +17,7 @@ import {
   DialogDescription,
 } from "@/components/ui/dialog";
 import { supabase } from "@/integrations/supabase/client";
-import { CreditCard, Plus, Copy, Mail, RefreshCw, X } from "lucide-react";
+import { CreditCard, Plus, Copy, Mail, RefreshCw, X, Trash2 } from "lucide-react";
 import { formatCurrency, formatDateTime, statusBadgeClass } from "@/lib/format";
 import { toast } from "sonner";
 import {
@@ -127,6 +127,17 @@ function PaymentsIndex() {
     load();
   };
 
+  const onDelete = async (id: string) => {
+    if (!confirm("Delete this payment request? This cannot be undone.")) return;
+    const { error } = await supabase.from("payment_requests").delete().eq("id", id);
+    if (error) {
+      toast.error(error.message);
+      return;
+    }
+    toast.success("Payment request deleted");
+    load();
+  };
+
   return (
     <PageContainer>
       <PageHeader
@@ -240,6 +251,15 @@ function PaymentsIndex() {
                           </Button>
                         </>
                       )}
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        onClick={() => onDelete(r.id)}
+                        title="Delete"
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
                     </div>
                   </td>
                 </tr>