feat: update cancelTopup API call to use PATCH method and enhance success message with topup details ✨

components/topups-table.tsx

@@ -203,16 +203,18 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
 						View Details
 					</Button>
 				</Link>
-				<Badge
-					className={cn(
-						topup?.paid
-							? "text-green-500 bg-green-500/20"
-							: "text-yellow-500 bg-yellow-500/20",
-					)}
-					variant={topup.paid ? "outline" : "secondary"}
-				>
-					{topup.paid ? "Paid" : "Unpaid"}
-				</Badge>
+				{topup.status !== "CANCELLED" && (
+					<Badge
+						className={cn(
+							topup?.paid
+								? "text-green-500 bg-green-500/20"
+								: "text-yellow-500 bg-yellow-500/20",
+						)}
+						variant={topup.paid ? "outline" : "secondary"}
+					>
+						{topup.paid ? "Paid" : "Unpaid"}
+					</Badge>
+				)}
 			</div>
 			<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
 				<div className="block sm:hidden">