From 88945333edeaf3df1495b5024b2ecfbb932326fd Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 09:05:28 +0000
Subject: [PATCH] Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>
---
 .../collections/payment-plans-panel.tsx       | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/src/components/collections/payment-plans-panel.tsx b/src/components/collections/payment-plans-panel.tsx
index de59105..f6f2feb 100644
--- a/src/components/collections/payment-plans-panel.tsx
+++ b/src/components/collections/payment-plans-panel.tsx
@@ -334,6 +334,7 @@ export function PaymentPlansPanel({
                       {ins.map((i) => {
                         const overdue =
                           !i.paid && parseDateOnly(i.due_date)! < new Date(new Date().toDateString());
+                        const req = i.payment_request_id ? requests[i.payment_request_id] : undefined;
                         return (
                           <div key={i.id} className="flex items-center gap-3 p-2.5 px-3">
                             <Checkbox
@@ -346,6 +347,11 @@ export function PaymentPlansPanel({
                                 {i.paid && i.paid_on && (
                                   <span className="ml-2 text-xs text-success">paid {formatDate(i.paid_on)}</span>
                                 )}
+                                {!i.paid && req && (
+                                  <Badge variant="outline" className="ml-2 text-[10px] capitalize">
+                                    {req.status}
+                                  </Badge>
+                                )}
                               </div>
                               <div className={`text-xs ${overdue ? "text-destructive" : "text-muted-foreground"}`}>
                                 Due {formatDate(i.due_date)}
@@ -367,6 +373,48 @@ export function PaymentPlansPanel({
                                   {formatCurrency(i.amount)}
                                 </div>
                               )}
+                              {!i.paid && !req && (
+                                <Button
+                                  size="sm"
+                                  variant="outline"
+                                  className="h-7"
+                                  disabled={busyId === i.id}
+                                  onClick={() => generatePayment(i, p)}
+                                  title="Generate Stripe payment link"
+                                >
+                                  {busyId === i.id ? (
+                                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                  ) : (
+                                    <CreditCard className="h-3.5 w-3.5" />
+                                  )}
+                                  <span className="ml-1 text-xs">Generate</span>
+                                </Button>
+                              )}
+                              {!i.paid && req && (
+                                <>
+                                  {req.stripe_checkout_url && (
+                                    <Button size="icon" variant="ghost" className="h-7 w-7" asChild title="Open payment link">
+                                      <a href={req.stripe_checkout_url} target="_blank" rel="noreferrer">
+                                        <ExternalLink className="h-3.5 w-3.5" />
+                                      </a>
+                                    </Button>
+                                  )}
+                                  <Button
+                                    size="icon"
+                                    variant="ghost"
+                                    className="h-7 w-7"
+                                    disabled={busyId === i.id}
+                                    onClick={() => refreshStatus(i)}
+                                    title="Refresh status"
+                                  >
+                                    {busyId === i.id ? (
+                                      <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                    ) : (
+                                      <RefreshCw className="h-3.5 w-3.5" />
+                                    )}
+                                  </Button>
+                                </>
+                              )}
                             </div>
                           </div>
                         );