Michilis/Spanglish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Backend and frontend updates: auth, email, payments, events, tickets; carrousel images; mobile event detail layout; i18n

Browse Source
This commit is contained in:
Michilis
2026-02-02 20:58:21 +00:00
parent bafd1425c4
commit 4a84ad22c7
44 changed files with 1323 additions and 472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/src/app/admin/bookings/page.tsx
View File

@@ -18,6 +18,7 @@ import {
import toast from 'react-hot-toast';
interface TicketWithDetails extends Omit<Ticket, 'payment'> {
bookingId?: string;
event?: Event;
payment?: {
id: string;
@@ -194,6 +195,23 @@ export default function AdminBookingsPage() {
pendingPayment: tickets.filter(t => t.payment?.status === 'pending').length,
};
// Helper to get booking info for a ticket (ticket count and total)
const getBookingInfo = (ticket: TicketWithDetails) => {
if (!ticket.bookingId) {
return { ticketCount: 1, bookingTotal: Number(ticket.payment?.amount || 0) };
}
// Count all tickets with the same bookingId
const bookingTickets = tickets.filter(
t => t.bookingId === ticket.bookingId
);
return {
ticketCount: bookingTickets.length,
bookingTotal: bookingTickets.reduce((sum, t) => sum + Number(t.payment?.amount || 0), 0),
};
};
if (loading) {
return (
<div className="flex items-center justify-center py-12">
@@ -309,7 +327,9 @@ export default function AdminBookingsPage() {
</td>
</tr>
) : (
sortedTickets.map((ticket) => (
sortedTickets.map((ticket) => {
const bookingInfo = getBookingInfo(ticket);
return (
<tr key={ticket.id} className="hover:bg-gray-50">
<td className="px-6 py-4">
<div className="space-y-1">
@@ -341,9 +361,16 @@ export default function AdminBookingsPage() {
{getPaymentMethodLabel(ticket.payment?.provider || 'cash')}
</p>
{ticket.payment && (
<p className="text-sm font-medium">
{ticket.payment.amount?.toLocaleString()} {ticket.payment.currency}
</p>
<div>
<p className="text-sm font-medium">
{bookingInfo.bookingTotal.toLocaleString()} {ticket.payment.currency}
</p>
{bookingInfo.ticketCount > 1 && (
<p className="text-xs text-purple-600 mt-1">
📦 {bookingInfo.ticketCount} × {Number(ticket.payment.amount).toLocaleString()} {ticket.payment.currency}
</p>
)}
</div>
)}
</div>
</td>
@@ -354,6 +381,11 @@ export default function AdminBookingsPage() {
{ticket.qrCode && (
<p className="text-xs text-gray-400 mt-1 font-mono">{ticket.qrCode}</p>
)}
{ticket.bookingId && (
<p className="text-xs text-purple-600 mt-1" title="Part of multi-ticket booking">
📦 Group Booking
</p>
)}
</td>
<td className="px-6 py-4 text-sm text-gray-600">
{formatDate(ticket.createdAt)}
@@ -415,7 +447,8 @@ export default function AdminBookingsPage() {
</div>
</td>
</tr>
))
);
})
)}
</tbody>
</table>

5
frontend/src/app/admin/events/[id]/page.tsx
View File

@@ -678,6 +678,11 @@ export default function AdminEventDetailPage() {
<td className="px-6 py-4">
<p className="font-medium">{ticket.attendeeFirstName} {ticket.attendeeLastName || ''}</p>
<p className="text-sm text-gray-500">ID: {ticket.id.slice(0, 8)}...</p>
{ticket.bookingId && (
<p className="text-xs text-purple-600 mt-1" title={`Booking: ${ticket.bookingId}`}>
📦 {locale === 'es' ? 'Reserva grupal' : 'Group booking'}
</p>
)}
</td>
<td className="px-6 py-4">
<p className="text-sm">{ticket.attendeeEmail}</p>

318
frontend/src/app/admin/payments/page.tsx
View File

@@ -230,13 +230,69 @@ export default function AdminPaymentsPage() {
return labels[provider] || provider;
};
// Calculate totals
// Helper to get booking info for a payment (ticket count and total)
const getBookingInfo = (payment: PaymentWithDetails) => {
if (!payment.ticket?.bookingId) {
return { ticketCount: 1, bookingTotal: payment.amount };
}
// Count all payments with the same bookingId
const bookingPayments = payments.filter(
p => p.ticket?.bookingId === payment.ticket?.bookingId
);
return {
ticketCount: bookingPayments.length,
bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
};
};
// Get booking info for pending approval payments
const getPendingBookingInfo = (payment: PaymentWithDetails) => {
if (!payment.ticket?.bookingId) {
return { ticketCount: 1, bookingTotal: payment.amount };
}
// Count all pending payments with the same bookingId
const bookingPayments = pendingApprovalPayments.filter(
p => p.ticket?.bookingId === payment.ticket?.bookingId
);
return {
ticketCount: bookingPayments.length,
bookingTotal: bookingPayments.reduce((sum, p) => sum + Number(p.amount), 0),
};
};
// Calculate totals (sum all individual payment amounts)
const totalPending = payments
.filter(p => p.status === 'pending' || p.status === 'pending_approval')
.reduce((sum, p) => sum + p.amount, 0);
.reduce((sum, p) => sum + Number(p.amount), 0);
const totalPaid = payments
.filter(p => p.status === 'paid')
.reduce((sum, p) => sum + p.amount, 0);
.reduce((sum, p) => sum + Number(p.amount), 0);
// Get unique booking count (for summary display)
const getUniqueBookingsCount = (paymentsList: PaymentWithDetails[]) => {
const seen = new Set<string>();
let count = 0;
paymentsList.forEach(p => {
const bookingKey = p.ticket?.bookingId || p.id;
if (!seen.has(bookingKey)) {
seen.add(bookingKey);
count++;
}
});
return count;
};
const pendingBookingsCount = getUniqueBookingsCount(
payments.filter(p => p.status === 'pending' || p.status === 'pending_approval')
);
const paidBookingsCount = getUniqueBookingsCount(
payments.filter(p => p.status === 'paid')
);
const pendingApprovalBookingsCount = getUniqueBookingsCount(pendingApprovalPayments);
if (loading) {
return (
@@ -257,7 +313,9 @@ export default function AdminPaymentsPage() {
</div>
{/* Approval Detail Modal */}
{selectedPayment && (
{selectedPayment && (() => {
const modalBookingInfo = getBookingInfo(selectedPayment);
return (
<div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
<Card className="w-full max-w-lg p-6">
<h2 className="text-xl font-bold mb-4">
@@ -268,8 +326,15 @@ export default function AdminPaymentsPage() {
<div className="bg-gray-50 rounded-lg p-4">
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-gray-500">{locale === 'es' ? 'Monto' : 'Amount'}</p>
<p className="font-bold text-lg">{formatCurrency(selectedPayment.amount, selectedPayment.currency)}</p>
<p className="text-gray-500">{locale === 'es' ? 'Monto Total' : 'Total Amount'}</p>
<p className="font-bold text-lg">{formatCurrency(modalBookingInfo.bookingTotal, selectedPayment.currency)}</p>
{modalBookingInfo.ticketCount > 1 && (
<div className="mt-2 p-2 bg-purple-50 rounded">
<p className="text-xs text-purple-700">
📦 {modalBookingInfo.ticketCount} tickets × {formatCurrency(selectedPayment.amount, selectedPayment.currency)}
</p>
</div>
)}
</div>
<div>
<p className="text-gray-500">{locale === 'es' ? 'Método' : 'Method'}</p>
@@ -309,6 +374,15 @@ export default function AdminPaymentsPage() {
</div>
)}
{selectedPayment.payerName && (
<div className="bg-amber-50 border border-amber-200 rounded-lg p-3">
<p className="text-sm text-amber-800 font-medium">
{locale === 'es' ? '⚠️ Pagado por otra persona:' : '⚠️ Paid by someone else:'}
</p>
<p className="text-amber-900 font-bold">{selectedPayment.payerName}</p>
</div>
)}
<div>
<label className="block text-sm font-medium mb-1">
{locale === 'es' ? 'Nota interna (opcional)' : 'Internal note (optional)'}
@@ -351,7 +425,8 @@ export default function AdminPaymentsPage() {
</button>
</Card>
</div>
)}
);
})()}
{/* Export Modal */}
{showExportModal && (
@@ -481,7 +556,10 @@ export default function AdminPaymentsPage() {
</div>
<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">{pendingApprovalPayments.length}</p>
<p className="text-xl font-bold text-yellow-600">{pendingApprovalBookingsCount}</p>
{pendingApprovalPayments.length !== pendingApprovalBookingsCount && (
<p className="text-xs text-gray-400">({pendingApprovalPayments.length} tickets)</p>
)}
</div>
</div>
</Card>
@@ -493,6 +571,7 @@ export default function AdminPaymentsPage() {
<div>
<p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pendiente' : 'Total Pending'}</p>
<p className="text-xl font-bold">{formatCurrency(totalPending, 'PYG')}</p>
<p className="text-xs text-gray-400">{pendingBookingsCount} {locale === 'es' ? 'reservas' : 'bookings'}</p>
</div>
</div>
</Card>
@@ -504,6 +583,7 @@ export default function AdminPaymentsPage() {
<div>
<p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pagado' : 'Total Paid'}</p>
<p className="text-xl font-bold text-green-600">{formatCurrency(totalPaid, 'PYG')}</p>
<p className="text-xs text-gray-400">{paidBookingsCount} {locale === 'es' ? 'reservas' : 'bookings'}</p>
</div>
</div>
</Card>
@@ -513,7 +593,7 @@ export default function AdminPaymentsPage() {
<BoltIcon className="w-5 h-5 text-blue-600" />
</div>
<div>
<p className="text-sm text-gray-500">{locale === 'es' ? 'Total Pagos' : 'Total Payments'}</p>
<p className="text-sm text-gray-500">{locale === 'es' ? 'Total Tickets' : 'Total Tickets'}</p>
<p className="text-xl font-bold">{payments.length}</p>
</div>
</div>
@@ -565,46 +645,60 @@ export default function AdminPaymentsPage() {
</Card>
) : (
<div className="space-y-4">
{pendingApprovalPayments.map((payment) => (
<Card key={payment.id} className="p-4">
<div className="flex items-start justify-between">
<div className="flex items-start gap-4">
<div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
{getProviderIcon(payment.provider)}
</div>
<div>
<div className="flex items-center gap-2 mb-1">
<p className="font-bold text-lg">{formatCurrency(payment.amount, payment.currency)}</p>
{getStatusBadge(payment.status)}
{pendingApprovalPayments.map((payment) => {
const bookingInfo = getPendingBookingInfo(payment);
return (
<Card key={payment.id} className="p-4">
<div className="flex items-start justify-between">
<div className="flex items-start gap-4">
<div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center flex-shrink-0">
{getProviderIcon(payment.provider)}
</div>
{payment.ticket && (
<p className="text-sm font-medium">
{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
</p>
)}
{payment.event && (
<p className="text-sm text-gray-500">{payment.event.title}</p>
)}
<div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
<span className="flex items-center gap-1">
{getProviderIcon(payment.provider)}
{getProviderLabel(payment.provider)}
</span>
{payment.userMarkedPaidAt && (
<div>
<div className="flex items-center gap-2 mb-1">
<p className="font-bold text-lg">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
{bookingInfo.ticketCount > 1 && (
<span className="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">
📦 {bookingInfo.ticketCount} tickets × {formatCurrency(payment.amount, payment.currency)}
</span>
)}
{getStatusBadge(payment.status)}
</div>
{payment.ticket && (
<p className="text-sm font-medium">
{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
{bookingInfo.ticketCount > 1 && <span className="text-gray-400 font-normal"> +{bookingInfo.ticketCount - 1} {locale === 'es' ? 'más' : 'more'}</span>}
</p>
)}
{payment.event && (
<p className="text-sm text-gray-500">{payment.event.title}</p>
)}
<div className="flex items-center gap-4 mt-2 text-xs text-gray-400">
<span className="flex items-center gap-1">
<ClockIcon className="w-3 h-3" />
{locale === 'es' ? 'Marcado:' : 'Marked:'} {formatDate(payment.userMarkedPaidAt)}
{getProviderIcon(payment.provider)}
{getProviderLabel(payment.provider)}
</span>
{payment.userMarkedPaidAt && (
<span className="flex items-center gap-1">
<ClockIcon className="w-3 h-3" />
{locale === 'es' ? 'Marcado:' : 'Marked:'} {formatDate(payment.userMarkedPaidAt)}
</span>
)}
</div>
{payment.payerName && (
<p className="text-xs text-amber-600 mt-1 font-medium">
⚠️ {locale === 'es' ? 'Pago por:' : 'Paid by:'} {payment.payerName}
</p>
)}
</div>
</div>
<Button onClick={() => setSelectedPayment(payment)}>
{locale === 'es' ? 'Revisar' : 'Review'}
</Button>
</div>
<Button onClick={() => setSelectedPayment(payment)}>
{locale === 'es' ? 'Revisar' : 'Review'}
</Button>
</div>
</Card>
))}
</Card>
);
})}
</div>
)}
</>
@@ -671,67 +765,89 @@ export default function AdminPaymentsPage() {
</td>
</tr>
) : (
payments.map((payment) => (
<tr key={payment.id} className="hover:bg-gray-50">
<td className="px-6 py-4">
{payment.ticket ? (
payments.map((payment) => {
const bookingInfo = getBookingInfo(payment);
return (
<tr key={payment.id} className="hover:bg-gray-50">
<td className="px-6 py-4">
{payment.ticket ? (
<div>
<p className="font-medium text-sm">
{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
</p>
<p className="text-xs text-gray-500">{payment.ticket.attendeeEmail}</p>
{payment.payerName && (
<p className="text-xs text-amber-600 mt-1">
⚠️ {locale === 'es' ? 'Pagado por:' : 'Paid by:'} {payment.payerName}
</p>
)}
</div>
) : (
<span className="text-gray-400 text-sm">-</span>
)}
</td>
<td className="px-6 py-4">
{payment.event ? (
<p className="text-sm">{payment.event.title}</p>
) : (
<span className="text-gray-400 text-sm">-</span>
)}
</td>
<td className="px-6 py-4">
<div>
<p className="font-medium text-sm">
{payment.ticket.attendeeFirstName} {payment.ticket.attendeeLastName}
</p>
<p className="text-xs text-gray-500">{payment.ticket.attendeeEmail}</p>
<p className="font-medium">{formatCurrency(bookingInfo.bookingTotal, payment.currency)}</p>
{bookingInfo.ticketCount > 1 && (
<p className="text-xs text-purple-600 mt-1">
📦 {bookingInfo.ticketCount} × {formatCurrency(payment.amount, payment.currency)}
</p>
)}
</div>
) : (
<span className="text-gray-400 text-sm">-</span>
)}
</td>
<td className="px-6 py-4">
{payment.event ? (
<p className="text-sm">{payment.event.title}</p>
) : (
<span className="text-gray-400 text-sm">-</span>
)}
</td>
<td className="px-6 py-4 font-medium">
{formatCurrency(payment.amount, payment.currency)}
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 text-sm text-gray-600">
{getProviderIcon(payment.provider)}
{getProviderLabel(payment.provider)}
</div>
</td>
<td className="px-6 py-4 text-sm text-gray-600">
{formatDate(payment.createdAt)}
</td>
<td className="px-6 py-4">
{getStatusBadge(payment.status)}
</td>
<td className="px-6 py-4">
<div className="flex items-center justify-end gap-2">
{(payment.status === 'pending' || payment.status === 'pending_approval') && (
<Button
size="sm"
onClick={() => setSelectedPayment(payment)}
>
<CheckCircleIcon className="w-4 h-4 mr-1" />
{locale === 'es' ? 'Revisar' : 'Review'}
</Button>
)}
{payment.status === 'paid' && (
<Button
size="sm"
variant="outline"
onClick={() => handleRefund(payment.id)}
>
<ArrowPathIcon className="w-4 h-4 mr-1" />
{t('admin.payments.refund')}
</Button>
)}
</div>
</td>
</tr>
))
</td>
<td className="px-6 py-4">
<div className="flex items-center gap-2 text-sm text-gray-600">
{getProviderIcon(payment.provider)}
{getProviderLabel(payment.provider)}
</div>
</td>
<td className="px-6 py-4 text-sm text-gray-600">
{formatDate(payment.createdAt)}
</td>
<td className="px-6 py-4">
<div className="space-y-1">
{getStatusBadge(payment.status)}
{payment.ticket?.bookingId && (
<p className="text-xs text-purple-600" title="Part of multi-ticket booking">
📦 {locale === 'es' ? 'Grupo' : 'Group'}
</p>
)}
</div>
</td>
<td className="px-6 py-4">
<div className="flex items-center justify-end gap-2">
{(payment.status === 'pending' || payment.status === 'pending_approval') && (
<Button
size="sm"
onClick={() => setSelectedPayment(payment)}
>
<CheckCircleIcon className="w-4 h-4 mr-1" />
{locale === 'es' ? 'Revisar' : 'Review'}
</Button>
)}
{payment.status === 'paid' && (
<Button
size="sm"
variant="outline"
onClick={() => handleRefund(payment.id)}
>
<ArrowPathIcon className="w-4 h-4 mr-1" />
{t('admin.payments.refund')}
</Button>
)}
</div>
</td>
</tr>
);
})
)}
</tbody>
</table>