From 69768077e5b7662ef655a8906d8809816f694b67 Mon Sep 17 00:00:00 2001 From: Michilis Date: Thu, 4 Jun 2026 23:35:53 +0000 Subject: [PATCH] Add search and event filters to admin email logs. Let admins find logs by recipient or subject and narrow results by event on the Email Logs tab. --- backend/src/routes/emails.ts | 11 ++++- frontend/src/app/admin/emails/page.tsx | 56 ++++++++++++++++++++++++-- frontend/src/lib/api.ts | 3 +- 3 files changed, 65 insertions(+), 5 deletions(-) diff --git a/backend/src/routes/emails.ts b/backend/src/routes/emails.ts index 91f8406..281e900 100644 --- a/backend/src/routes/emails.ts +++ b/backend/src/routes/emails.ts @@ -1,6 +1,6 @@ import { Hono } from 'hono'; import { db, dbGet, dbAll, emailTemplates, emailLogs, events, tickets } from '../db/index.js'; -import { eq, desc, and, sql } from 'drizzle-orm'; +import { eq, desc, and, or, sql } from 'drizzle-orm'; import { requireAuth } from '../lib/auth.js'; import { getNow, generateId } from '../lib/utils.js'; import emailService from '../lib/email.js'; @@ -287,6 +287,7 @@ emailsRouter.post('/preview', requireAuth(['admin', 'organizer']), async (c) => emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => { const eventId = c.req.query('eventId'); const status = c.req.query('status'); + const search = c.req.query('search'); const limit = parseInt(c.req.query('limit') || '50'); const offset = parseInt(c.req.query('offset') || '0'); @@ -299,6 +300,14 @@ emailsRouter.get('/logs', requireAuth(['admin', 'organizer']), async (c) => { if (status) { conditions.push(eq((emailLogs as any).status, status)); } + if (search && search.trim()) { + const term = `%${search.trim().toLowerCase()}%`; + conditions.push(or( + sql`LOWER(${(emailLogs as any).recipientEmail}) LIKE ${term}`, + sql`LOWER(COALESCE(${(emailLogs as any).recipientName}, '')) LIKE ${term}`, + sql`LOWER(${(emailLogs as any).subject}) LIKE ${term}`, + )); + } if (conditions.length > 0) { query = query.where(and(...conditions)); diff --git a/frontend/src/app/admin/emails/page.tsx b/frontend/src/app/admin/emails/page.tsx index 3aec4ac..2e2b754 100644 --- a/frontend/src/app/admin/emails/page.tsx +++ b/frontend/src/app/admin/emails/page.tsx @@ -22,6 +22,7 @@ import { ChevronRightIcon, XMarkIcon, ArrowPathIcon, + MagnifyingGlassIcon, } from '@heroicons/react/24/outline'; import toast from 'react-hot-toast'; import clsx from 'clsx'; @@ -55,6 +56,9 @@ export default function AdminEmailsPage() { const [logsOffset, setLogsOffset] = useState(0); const [logsTotal, setLogsTotal] = useState(0); const [logsSubTab, setLogsSubTab] = useState<'all' | 'failed'>('all'); + const [logsSearch, setLogsSearch] = useState(''); + const [debouncedSearch, setDebouncedSearch] = useState(''); + const [logsEventFilter, setLogsEventFilter] = useState(''); const [resendingLogId, setResendingLogId] = useState(null); const [selectedLog, setSelectedLog] = useState(null); @@ -214,11 +218,20 @@ export default function AdminEmailsPage() { } }; + useEffect(() => { + const handle = setTimeout(() => setDebouncedSearch(logsSearch), 300); + return () => clearTimeout(handle); + }, [logsSearch]); + + useEffect(() => { + setLogsOffset(0); + }, [debouncedSearch, logsEventFilter]); + useEffect(() => { if (activeTab === 'logs') { loadLogs(); } - }, [activeTab, logsOffset, logsSubTab]); + }, [activeTab, logsOffset, logsSubTab, debouncedSearch, logsEventFilter]); const loadData = async () => { try { @@ -241,6 +254,8 @@ export default function AdminEmailsPage() { limit: 20, offset: logsOffset, ...(logsSubTab === 'failed' ? { status: 'failed' } : {}), + ...(debouncedSearch.trim() ? { search: debouncedSearch.trim() } : {}), + ...(logsEventFilter ? { eventId: logsEventFilter } : {}), }); setLogs(res.logs); setLogsTotal(res.pagination.total); @@ -757,6 +772,41 @@ export default function AdminEmailsPage() { + {/* Filters: search + event */} +
+
+ + setLogsSearch(e.target.value)} + placeholder="Search by recipient or subject..." + className="w-full pl-10 pr-10 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow" + /> + {logsSearch && ( + + )} +
+ +
+ {/* Desktop: Table */}
@@ -772,7 +822,7 @@ export default function AdminEmailsPage() { {logs.length === 0 ? ( - {logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'} + {(debouncedSearch.trim() || logsEventFilter) ? 'No emails match your filters' : logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'} ) : ( logs.map((log) => ( @@ -829,7 +879,7 @@ export default function AdminEmailsPage() { {/* Mobile: Card List */}
{logs.length === 0 ? ( -
{logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'}
+
{(debouncedSearch.trim() || logsEventFilter) ? 'No emails match your filters' : logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'}
) : ( logs.map((log) => ( setSelectedLog(log)}> diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts index e903bc5..9a1b790 100644 --- a/frontend/src/lib/api.ts +++ b/frontend/src/lib/api.ts @@ -496,10 +496,11 @@ export const emailsApi = { }), // Logs - getLogs: (params?: { eventId?: string; status?: string; limit?: number; offset?: number }) => { + getLogs: (params?: { eventId?: string; status?: string; search?: string; limit?: number; offset?: number }) => { const query = new URLSearchParams(); if (params?.eventId) query.set('eventId', params.eventId); if (params?.status) query.set('status', params.status); + if (params?.search) query.set('search', params.search); if (params?.limit) query.set('limit', params.limit.toString()); if (params?.offset) query.set('offset', params.offset.toString()); return fetchApi<{ logs: EmailLog[]; pagination: Pagination }>(`/api/emails/logs?${query}`);