Added delete button to UI

X-Lovable-Edit-ID: edt-a4e150ac-d16a-4e1d-b4a4-11f8da23471c
Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

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>