fix(admin): hide pending-approval payments for past events

Made-with: Cursor

frontend/src/app/admin/payments/page.tsx

@@ -281,6 +281,22 @@ export default function AdminPaymentsPage() {
     };
   };
 
+  // Hide pending-approval payments whose event has already ended.
+  // Fall back to startDatetime when endDatetime is absent; keep visible when we
+  // can't classify (event missing from list and no startDatetime on payment.event).
+  const visiblePendingApprovalPayments = (() => {
+    const now = new Date();
+    return pendingApprovalPayments.filter((payment) => {
+      const eventId = payment.event?.id;
+      const fullEvent = eventId ? events.find((e) => e.id === eventId) : undefined;
+      const endIso = fullEvent?.endDatetime
+        || fullEvent?.startDatetime
+        || payment.event?.startDatetime;
+      if (!endIso) return true;
+      return parseDate(endIso).getTime() >= now.getTime();
+    });
+  })();
+
   // Get booking info for pending approval payments
   const getPendingBookingInfo = (payment: PaymentWithDetails) => {
     if (!payment.ticket?.bookingId) {
@@ -288,7 +304,7 @@ export default function AdminPaymentsPage() {
     }
     
     // Count all pending payments with the same bookingId
-    const bookingPayments = pendingApprovalPayments.filter(
+    const bookingPayments = visiblePendingApprovalPayments.filter(
       p => p.ticket?.bookingId === payment.ticket?.bookingId
     );
     
@@ -326,7 +342,7 @@ export default function AdminPaymentsPage() {
   const paidBookingsCount = getUniqueBookingsCount(
     payments.filter(p => p.status === 'paid')
   );
-  const pendingApprovalBookingsCount = getUniqueBookingsCount(pendingApprovalPayments);
+  const pendingApprovalBookingsCount = getUniqueBookingsCount(visiblePendingApprovalPayments);
 
   if (loading) {
     return (
@@ -620,8 +636,8 @@ export default function AdminPaymentsPage() {
             <div>
               <p className="text-sm text-gray-500">{locale === 'es' ? 'Pendientes de Aprobación' : 'Pending Approval'}</p>
               <p className="text-xl font-bold text-yellow-600">{pendingApprovalBookingsCount}</p>
-              {pendingApprovalPayments.length !== pendingApprovalBookingsCount && (
+              {visiblePendingApprovalPayments.length !== pendingApprovalBookingsCount && (
-                <p className="text-xs text-gray-400">({pendingApprovalPayments.length} tickets)</p>
+                <p className="text-xs text-gray-400">({visiblePendingApprovalPayments.length} tickets)</p>
               )}
             </div>
           </div>
@@ -670,8 +686,8 @@ export default function AdminPaymentsPage() {
             className={clsx('pb-3 px-1 text-sm font-medium border-b-2 transition-colors whitespace-nowrap min-h-[44px]',
               activeTab === 'pending_approval' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700')}>
             {locale === 'es' ? 'Pendientes' : 'Pending Approval'}
-            {pendingApprovalPayments.length > 0 && (
+            {visiblePendingApprovalPayments.length > 0 && (
-              <span className="ml-2 bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs">{pendingApprovalPayments.length}</span>
+              <span className="ml-2 bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded-full text-xs">{visiblePendingApprovalPayments.length}</span>
             )}
           </button>
           <button onClick={() => setActiveTab('all')}
@@ -685,7 +701,7 @@ export default function AdminPaymentsPage() {
       {/* Pending Approval Tab */}
       {activeTab === 'pending_approval' && (
         <>
-          {pendingApprovalPayments.length === 0 ? (
+          {visiblePendingApprovalPayments.length === 0 ? (
             <Card className="p-12 text-center">
               <CheckCircleIcon className="w-12 h-12 text-green-400 mx-auto mb-4" />
               <p className="text-gray-500">
@@ -696,7 +712,7 @@ export default function AdminPaymentsPage() {
             </Card>
           ) : (
             <div className="space-y-4">
-              {pendingApprovalPayments.map((payment) => {
+              {visiblePendingApprovalPayments.map((payment) => {
                 const bookingInfo = getPendingBookingInfo(payment);
                 return (
                   <Card key={payment.id} className="p-4">