import { useState, ReactNode } from 'react'; import { Head } from '@inertiajs/react'; import { useQuery } from '@tanstack/react-query'; import AdminLayout from '@/layouts/AdminLayout'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Button } from '@/components/ui/button'; import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'; import { Mail, Search, Download, AlertTriangle, Loader2, CheckCircle2 } from 'lucide-react'; import { format } from 'date-fns'; import { exportToCSV } from '@/lib/csv-export'; type EmailLog = { id: string; to_address: string; recipients: { to?: string[]; cc?: string[]; bcc?: string[] } | null; from_address: string | null; subject: string | null; body_html: string | null; body_text: string | null; status: 'sending' | 'sent' | 'failed'; error: string | null; sent_at: string | null; created_at: string; updated_at: string; }; const statusBadge = (status: string) => { if (status === 'sent') return Sent; if (status === 'failed') return Failed; return Sending; }; const EmailLogsPage = () => { const [search, setSearch] = useState(''); const [statusFilter, setStatusFilter] = useState('all'); const [selected, setSelected] = useState(null); const { data: logs, isLoading } = useQuery({ queryKey: ['email-logs', statusFilter, search], queryFn: async () => { const params = new URLSearchParams(); if (statusFilter !== 'all') params.set('status', statusFilter); if (search.trim()) params.set('q', search.trim()); const res = await fetch(`/api/admin/email-logs?${params.toString()}`); if (!res.ok) return []; return res.json() as Promise; }, }); const rows = logs || []; const handleExport = () => { exportToCSV( rows.map((r) => ({ timestamp: format(new Date(r.created_at), 'yyyy-MM-dd HH:mm:ss'), to: r.to_address, from: r.from_address || '', subject: r.subject || '', status: r.status, sent_at: r.sent_at ? format(new Date(r.sent_at), 'yyyy-MM-dd HH:mm:ss') : '', error: r.error || '', })), `email-logs-${format(new Date(), 'yyyy-MM-dd')}`, ); }; return ( <>

Email Logs

Every outgoing email. Click a row to view the full message.

setSearch(e.target.value)} className="pl-9" />

Sent at To Subject Status From {isLoading ? ( Loading... ) : !rows.length ? ( No emails sent yet. ) : ( rows.map((log) => ( setSelected(log)} className="cursor-pointer hover:bg-muted/50" > {format(new Date(log.sent_at || log.created_at), 'dd MMM yy HH:mm')} {log.to_address} {log.subject || '—'} {statusBadge(log.status)} {log.from_address || '—'} )) )}

!open && setSelected(null)}> {selected && ( <> {selected.subject || '(no subject)'}

Status {statusBadge(selected.status)} From {selected.from_address || '—'} To {selected.recipients?.to?.join(', ') || selected.to_address} {selected.recipients?.cc && ( <> Cc {selected.recipients.cc.join(', ')} )} {selected.recipients?.bcc && ( <> Bcc {selected.recipients.bcc.join(', ')} )} Created {format(new Date(selected.created_at), 'dd MMM yyyy HH:mm:ss')} {selected.sent_at && ( <> Sent {format(new Date(selected.sent_at), 'dd MMM yyyy HH:mm:ss')} )}

{selected.error && (

Error

{selected.error}

)} {selected.body_html ? (

HTML body