From cf59de898b825c33de43124d31cd89111c11b857 Mon Sep 17 00:00:00 2001
From: Gitead <summitdentalcareframingham@gmail.com>
Date: Wed, 6 May 2026 18:24:49 -0400
Subject: [PATCH] feat: update payment status colors and add inline status
 switcher
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Pending: yellow → light red
- Paid: green → teal, label updated to "Paid in Full"
- Status badge for Pending/Partially Paid/Paid is now a styled inline
  dropdown to switch between the 3 statuses without opening a modal

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../payments/payments-recent-table.tsx        | 32 +++++++++++++++++--
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/apps/Frontend/src/components/payments/payments-recent-table.tsx b/apps/Frontend/src/components/payments/payments-recent-table.tsx
index 3d9cbae1..a2a7e7a1 100755
--- a/apps/Frontend/src/components/payments/payments-recent-table.tsx
+++ b/apps/Frontend/src/components/payments/payments-recent-table.tsx
@@ -463,7 +463,7 @@ export default function PaymentsRecentTable({
       case "PENDING":
         return {
           label: "Pending",
-          color: "bg-yellow-100 text-yellow-800",
+          color: "bg-red-100 text-red-800",
           icon: <Clock className="h-3 w-3 mr-1" />,
         };
       case "PARTIALLY_PAID":
@@ -474,8 +474,8 @@ export default function PaymentsRecentTable({
         };
       case "PAID":
         return {
-          label: "Paid",
-          color: "bg-green-100 text-green-800",
+          label: "Paid in Full",
+          color: "bg-teal-100 text-teal-800",
           icon: <CheckCircle className="h-3 w-3 mr-1" />,
         };
       case "OVERPAID":
@@ -708,6 +708,32 @@ export default function PaymentsRecentTable({
                           const { label, color, icon } = getStatusInfo(
                             payment.status
                           );
+                          const switchableStatuses: PaymentStatus[] = [
+                            "PENDING",
+                            "PARTIALLY_PAID",
+                            "PAID",
+                          ];
+                          const isSwitchable = switchableStatuses.includes(
+                            payment.status as PaymentStatus
+                          );
+                          if (isSwitchable) {
+                            return (
+                              <select
+                                value={payment.status ?? ""}
+                                onChange={(e) =>
+                                  updatePaymentStatusMutation.mutate({
+                                    paymentId: payment.id,
+                                    status: e.target.value as PaymentStatus,
+                                  })
+                                }
+                                className={`px-2 py-1 text-xs font-medium rounded-full border-0 cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-teal-400 ${color}`}
+                              >
+                                <option value="PENDING">Pending</option>
+                                <option value="PARTIALLY_PAID">Partially Paid</option>
+                                <option value="PAID">Paid in Full</option>
+                              </select>
+                            );
+                          }
                           return (
                             <span
                               className={`px-2 py-1 text-xs font-medium rounded-full ${color}`}