Add bill payment initiation UI

app/api/bill-pay/bills/[id]/initiate-payment/route.ts

@@ -0,0 +1,6 @@
+import { NextRequest } from "next/server";
+import { proxyRequest } from "@/lib/backend";
+
+export async function POST(req: NextRequest, { params }: { params: { id: string } }) {
+  return proxyRequest(req, `bill-pay/bills/${params.id}/initiate-payment`);
+}

app/bills/page.tsx

@@ -138,6 +138,24 @@ export default function BillsPage() {
     await load();
   };
 
+  const initiatePayment = async (bill: Bill) => {
+    const res = await apiFetch(`/api/bill-pay/bills/${bill.id}/initiate-payment`, {
+      method: "POST",
+      body: JSON.stringify({
+        amount: Number(bill.amount),
+        scheduledFor: new Date().toISOString(),
+        method: "ach",
+        memo: `LedgerOne payment for ${bill.name}`,
+      }),
+    });
+    if (res.error) {
+      setStatus(res.error.message ?? "Unable to initiate payment.");
+      return;
+    }
+    setStatus(`${bill.name} payment initiated.`);
+    await load();
+  };
+
   const updateStatus = async (bill: Bill, nextStatus: Bill["status"]) => {
     const res = await apiFetch(`/api/bill-pay/bills/${bill.id}`, {
       method: "PATCH",
@@ -283,7 +301,10 @@ export default function BillsPage() {
                   </div>
                   <div className="flex flex-wrap gap-2">
                     {bill.status !== "paid" && (
-                      <button onClick={() => markPaid(bill)} className="rounded-lg bg-primary px-3 py-2 text-xs font-bold text-primary-foreground hover:bg-primary/90">Mark Paid</button>
+                      <button onClick={() => initiatePayment(bill)} className="rounded-lg bg-primary px-3 py-2 text-xs font-bold text-primary-foreground hover:bg-primary/90">Initiate Payment</button>
+                    )}
+                    {bill.status !== "paid" && (
+                      <button onClick={() => markPaid(bill)} className="rounded-lg border border-primary/30 px-3 py-2 text-xs font-bold text-primary hover:bg-primary/10">Mark Paid</button>
                     )}
                     {bill.status !== "skipped" && bill.status !== "paid" && (
                       <button onClick={() => updateStatus(bill, "skipped")} className="rounded-lg border border-border px-3 py-2 text-xs font-medium text-foreground hover:bg-secondary/40">Skip</button>