From 4afa5d6fa0d99183d3af11d746696f83f140fbb1 Mon Sep 17 00:00:00 2001
From: Michilis <michael@azzamo.be>
Date: Wed, 29 Jul 2026 19:06:39 +0000
Subject: [PATCH] Show when the booking was made in the verify-payment modal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The modal only had "User marked as paid", which is absent for manual
payments the customer never confirmed — those opened with no timestamp
at all. Show the payment's createdAt unconditionally as "Booking made",
and give both lines a relative age suffix.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 frontend/src/app/admin/payments/page.tsx | 30 +++++++++++++++++++-----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/admin/payments/page.tsx b/frontend/src/app/admin/payments/page.tsx
index 1c4e9f7..1b1cc04 100644
--- a/frontend/src/app/admin/payments/page.tsx
+++ b/frontend/src/app/admin/payments/page.tsx
@@ -22,6 +22,7 @@ import {
   BoltIcon,
   BanknotesIcon,
   BuildingLibraryIcon,
+  CalendarDaysIcon,
   CreditCardIcon,
   EnvelopeIcon,
   FunnelIcon,
@@ -534,12 +535,29 @@ export default function AdminPaymentsPage() {
                 </div>
               )}
               
-              {selectedPayment.userMarkedPaidAt && (
-                <div className="flex items-center gap-2 text-sm text-gray-600">
-                  <ClockIcon className="w-4 h-4" />
-                  {locale === 'es' ? 'Usuario marcó como pagado:' : 'User marked as paid:'} {formatDate(selectedPayment.userMarkedPaidAt)}
-                </div>
-              )}
+              {/* Always shown — for payments the customer never confirmed, this
+                  is the only timestamp there is. */}
+              {(() => {
+                const age = getAgeInfo(selectedPayment.createdAt);
+                return (
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <CalendarDaysIcon className="w-4 h-4" />
+                    {locale === 'es' ? 'Reserva realizada:' : 'Booking made:'} {formatDate(selectedPayment.createdAt)}
+                    {age && <span className="text-gray-400">({age.label})</span>}
+                  </div>
+                );
+              })()}
+
+              {selectedPayment.userMarkedPaidAt && (() => {
+                const age = getAgeInfo(selectedPayment.userMarkedPaidAt);
+                return (
+                  <div className="flex items-center gap-2 text-sm text-gray-600">
+                    <ClockIcon className="w-4 h-4" />
+                    {locale === 'es' ? 'Usuario marcó como pagado:' : 'User marked as paid:'} {formatDate(selectedPayment.userMarkedPaidAt)}
+                    {age && <span className="text-gray-400">({age.label})</span>}
+                  </div>
+                );
+              })()}
               
               {selectedPayment.reminderSentAt && (
                 <div className="flex items-center gap-2 text-sm text-amber-600">