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: ,
};
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: ,
};
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 (
+
+ );
+ }
return (