69768077e5
Let admins find logs by recipient or subject and narrow results by event on the Email Logs tab.
1116 lines
47 KiB
TypeScript
1116 lines
47 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import { useLanguage } from '@/context/LanguageContext';
|
|
import { emailsApi, EmailTemplate, EmailLog, EmailStats } from '@/lib/api';
|
|
import { parseDate } from '@/lib/utils';
|
|
import Card from '@/components/ui/Card';
|
|
import Button from '@/components/ui/Button';
|
|
import Input from '@/components/ui/Input';
|
|
import { MoreMenu, DropdownItem, AdminMobileStyles } from '@/components/admin/MobileComponents';
|
|
import {
|
|
EnvelopeIcon,
|
|
PencilIcon,
|
|
DocumentDuplicateIcon,
|
|
EyeIcon,
|
|
PaperAirplaneIcon,
|
|
ClockIcon,
|
|
CheckCircleIcon,
|
|
XCircleIcon,
|
|
ExclamationTriangleIcon,
|
|
ChevronLeftIcon,
|
|
ChevronRightIcon,
|
|
XMarkIcon,
|
|
ArrowPathIcon,
|
|
MagnifyingGlassIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import toast from 'react-hot-toast';
|
|
import clsx from 'clsx';
|
|
|
|
type TabType = 'templates' | 'logs' | 'compose';
|
|
|
|
const DRAFT_STORAGE_KEY = 'spanglish-email-draft';
|
|
|
|
interface EmailDraft {
|
|
eventId: string;
|
|
templateSlug: string;
|
|
customSubject: string;
|
|
customBody: string;
|
|
recipientFilter: 'all' | 'confirmed' | 'pending' | 'checked_in';
|
|
savedAt: string;
|
|
}
|
|
|
|
export default function AdminEmailsPage() {
|
|
const { t, locale } = useLanguage();
|
|
const [activeTab, setActiveTab] = useState<TabType>('templates');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Templates state
|
|
const [templates, setTemplates] = useState<EmailTemplate[]>([]);
|
|
const [editingTemplate, setEditingTemplate] = useState<EmailTemplate | null>(null);
|
|
const [showTemplateForm, setShowTemplateForm] = useState(false);
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// Logs state
|
|
const [logs, setLogs] = useState<EmailLog[]>([]);
|
|
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<string | null>(null);
|
|
const [selectedLog, setSelectedLog] = useState<EmailLog | null>(null);
|
|
|
|
// Stats state
|
|
const [stats, setStats] = useState<EmailStats | null>(null);
|
|
|
|
// Preview state
|
|
const [previewHtml, setPreviewHtml] = useState<string | null>(null);
|
|
const [previewSubject, setPreviewSubject] = useState<string>('');
|
|
|
|
// Template form state
|
|
const [templateForm, setTemplateForm] = useState({
|
|
name: '',
|
|
slug: '',
|
|
subject: '',
|
|
subjectEs: '',
|
|
bodyHtml: '',
|
|
bodyHtmlEs: '',
|
|
bodyText: '',
|
|
bodyTextEs: '',
|
|
description: '',
|
|
isActive: true,
|
|
});
|
|
|
|
// Compose/Draft state
|
|
const [events, setEvents] = useState<any[]>([]);
|
|
const [composeForm, setComposeForm] = useState<EmailDraft>({
|
|
eventId: '',
|
|
templateSlug: '',
|
|
customSubject: '',
|
|
customBody: '',
|
|
recipientFilter: 'confirmed',
|
|
savedAt: '',
|
|
});
|
|
const [hasDraft, setHasDraft] = useState(false);
|
|
const [sending, setSending] = useState(false);
|
|
const [showRecipientPreview, setShowRecipientPreview] = useState(false);
|
|
const [previewRecipients, setPreviewRecipients] = useState<any[]>([]);
|
|
|
|
useEffect(() => {
|
|
loadData();
|
|
loadEvents();
|
|
loadDraft();
|
|
}, []);
|
|
|
|
const loadEvents = async () => {
|
|
try {
|
|
const res = await fetch('/api/events', {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('spanglish-token')}`,
|
|
},
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
setEvents(data.events || []);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load events');
|
|
}
|
|
};
|
|
|
|
const loadDraft = () => {
|
|
try {
|
|
const saved = localStorage.getItem(DRAFT_STORAGE_KEY);
|
|
if (saved) {
|
|
const draft = JSON.parse(saved) as EmailDraft;
|
|
setComposeForm(draft);
|
|
setHasDraft(true);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load draft');
|
|
}
|
|
};
|
|
|
|
const saveDraft = () => {
|
|
try {
|
|
const draft: EmailDraft = {
|
|
...composeForm,
|
|
savedAt: new Date().toISOString(),
|
|
};
|
|
localStorage.setItem(DRAFT_STORAGE_KEY, JSON.stringify(draft));
|
|
setHasDraft(true);
|
|
toast.success('Draft saved');
|
|
} catch (error) {
|
|
toast.error('Failed to save draft');
|
|
}
|
|
};
|
|
|
|
const clearDraft = () => {
|
|
localStorage.removeItem(DRAFT_STORAGE_KEY);
|
|
setComposeForm({
|
|
eventId: '',
|
|
templateSlug: '',
|
|
customSubject: '',
|
|
customBody: '',
|
|
recipientFilter: 'confirmed',
|
|
savedAt: '',
|
|
});
|
|
setHasDraft(false);
|
|
};
|
|
|
|
const loadRecipientPreview = async () => {
|
|
if (!composeForm.eventId) {
|
|
toast.error('Please select an event');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await fetch(`/api/events/${composeForm.eventId}/attendees`, {
|
|
headers: {
|
|
'Authorization': `Bearer ${localStorage.getItem('spanglish-token')}`,
|
|
},
|
|
});
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
let attendees = data.attendees || [];
|
|
|
|
// Apply filter
|
|
if (composeForm.recipientFilter !== 'all') {
|
|
attendees = attendees.filter((a: any) => a.status === composeForm.recipientFilter);
|
|
}
|
|
|
|
setPreviewRecipients(attendees);
|
|
setShowRecipientPreview(true);
|
|
}
|
|
} catch (error) {
|
|
toast.error('Failed to load recipients');
|
|
}
|
|
};
|
|
|
|
const handleSendEmail = async () => {
|
|
if (!composeForm.eventId || !composeForm.templateSlug) {
|
|
toast.error('Please select an event and template');
|
|
return;
|
|
}
|
|
|
|
if (!confirm(`Are you sure you want to send this email to ${previewRecipients.length} recipients?`)) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const res = await emailsApi.sendToEvent(composeForm.eventId, {
|
|
templateSlug: composeForm.templateSlug,
|
|
recipientFilter: composeForm.recipientFilter,
|
|
customVariables: composeForm.customBody ? { customMessage: composeForm.customBody } : undefined,
|
|
});
|
|
|
|
if (res.success) {
|
|
toast.success(`${res.queuedCount} email(s) are being sent in the background.`);
|
|
clearDraft();
|
|
setShowRecipientPreview(false);
|
|
} else {
|
|
toast.error(res.error || 'Failed to queue emails');
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to send emails');
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handle = setTimeout(() => setDebouncedSearch(logsSearch), 300);
|
|
return () => clearTimeout(handle);
|
|
}, [logsSearch]);
|
|
|
|
useEffect(() => {
|
|
setLogsOffset(0);
|
|
}, [debouncedSearch, logsEventFilter]);
|
|
|
|
useEffect(() => {
|
|
if (activeTab === 'logs') {
|
|
loadLogs();
|
|
}
|
|
}, [activeTab, logsOffset, logsSubTab, debouncedSearch, logsEventFilter]);
|
|
|
|
const loadData = async () => {
|
|
try {
|
|
const [templatesRes, statsRes] = await Promise.all([
|
|
emailsApi.getTemplates(),
|
|
emailsApi.getStats(),
|
|
]);
|
|
setTemplates(templatesRes.templates);
|
|
setStats(statsRes.stats);
|
|
} catch (error) {
|
|
toast.error('Failed to load email data');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const loadLogs = async () => {
|
|
try {
|
|
const res = await emailsApi.getLogs({
|
|
limit: 20,
|
|
offset: logsOffset,
|
|
...(logsSubTab === 'failed' ? { status: 'failed' } : {}),
|
|
...(debouncedSearch.trim() ? { search: debouncedSearch.trim() } : {}),
|
|
...(logsEventFilter ? { eventId: logsEventFilter } : {}),
|
|
});
|
|
setLogs(res.logs);
|
|
setLogsTotal(res.pagination.total);
|
|
} catch (error) {
|
|
toast.error('Failed to load email logs');
|
|
}
|
|
};
|
|
|
|
const handleResend = async (log: EmailLog) => {
|
|
setResendingLogId(log.id);
|
|
try {
|
|
const res = await emailsApi.resendLog(log.id);
|
|
if (res.success) {
|
|
toast.success('Email re-sent successfully');
|
|
} else {
|
|
toast.error(res.error || 'Failed to re-send email');
|
|
}
|
|
await loadLogs();
|
|
if (selectedLog?.id === log.id) {
|
|
const { log: updatedLog } = await emailsApi.getLog(log.id);
|
|
setSelectedLog(updatedLog);
|
|
}
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to re-send email');
|
|
} finally {
|
|
setResendingLogId(null);
|
|
}
|
|
};
|
|
|
|
const resetTemplateForm = () => {
|
|
setTemplateForm({
|
|
name: '',
|
|
slug: '',
|
|
subject: '',
|
|
subjectEs: '',
|
|
bodyHtml: '',
|
|
bodyHtmlEs: '',
|
|
bodyText: '',
|
|
bodyTextEs: '',
|
|
description: '',
|
|
isActive: true,
|
|
});
|
|
setEditingTemplate(null);
|
|
};
|
|
|
|
const handleEditTemplate = (template: EmailTemplate) => {
|
|
setTemplateForm({
|
|
name: template.name,
|
|
slug: template.slug,
|
|
subject: template.subject,
|
|
subjectEs: template.subjectEs || '',
|
|
bodyHtml: template.bodyHtml,
|
|
bodyHtmlEs: template.bodyHtmlEs || '',
|
|
bodyText: template.bodyText || '',
|
|
bodyTextEs: template.bodyTextEs || '',
|
|
description: template.description || '',
|
|
isActive: template.isActive,
|
|
});
|
|
setEditingTemplate(template);
|
|
setShowTemplateForm(true);
|
|
};
|
|
|
|
const handleSaveTemplate = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setSaving(true);
|
|
|
|
try {
|
|
const data = {
|
|
...templateForm,
|
|
subjectEs: templateForm.subjectEs || undefined,
|
|
bodyHtmlEs: templateForm.bodyHtmlEs || undefined,
|
|
bodyText: templateForm.bodyText || undefined,
|
|
bodyTextEs: templateForm.bodyTextEs || undefined,
|
|
description: templateForm.description || undefined,
|
|
};
|
|
|
|
if (editingTemplate) {
|
|
await emailsApi.updateTemplate(editingTemplate.id, data);
|
|
toast.success('Template updated');
|
|
} else {
|
|
await emailsApi.createTemplate(data);
|
|
toast.success('Template created');
|
|
}
|
|
|
|
setShowTemplateForm(false);
|
|
resetTemplateForm();
|
|
loadData();
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to save template');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const handlePreviewTemplate = async (template: EmailTemplate) => {
|
|
try {
|
|
const res = await emailsApi.preview({
|
|
templateSlug: template.slug,
|
|
variables: {
|
|
attendeeName: 'John Doe',
|
|
attendeeEmail: 'john@example.com',
|
|
ticketId: 'TKT-ABC123',
|
|
eventTitle: 'Spanglish Night - January Edition',
|
|
eventDate: 'January 28, 2026',
|
|
eventTime: '7:00 PM',
|
|
eventLocation: 'Casa Cultural, Asunción',
|
|
eventLocationUrl: 'https://maps.google.com',
|
|
eventPrice: '50,000 PYG',
|
|
paymentAmount: '50,000 PYG',
|
|
paymentMethod: 'Lightning',
|
|
paymentReference: 'PAY-XYZ789',
|
|
paymentDate: 'January 28, 2026',
|
|
customMessage: 'This is a preview message.',
|
|
},
|
|
locale,
|
|
});
|
|
setPreviewSubject(res.subject);
|
|
setPreviewHtml(res.bodyHtml);
|
|
} catch (error) {
|
|
toast.error('Failed to preview template');
|
|
}
|
|
};
|
|
|
|
const handleDeleteTemplate = async (id: string) => {
|
|
if (!confirm('Are you sure you want to delete this template?')) return;
|
|
|
|
try {
|
|
await emailsApi.deleteTemplate(id);
|
|
toast.success('Template deleted');
|
|
loadData();
|
|
} catch (error: any) {
|
|
toast.error(error.message || 'Failed to delete template');
|
|
}
|
|
};
|
|
|
|
const getStatusIcon = (status: string) => {
|
|
switch (status) {
|
|
case 'sent':
|
|
return <CheckCircleIcon className="w-5 h-5 text-green-500" />;
|
|
case 'failed':
|
|
return <XCircleIcon className="w-5 h-5 text-red-500" />;
|
|
case 'pending':
|
|
return <ClockIcon className="w-5 h-5 text-yellow-500" />;
|
|
case 'bounced':
|
|
return <ExclamationTriangleIcon className="w-5 h-5 text-orange-500" />;
|
|
default:
|
|
return <ClockIcon className="w-5 h-5 text-gray-500" />;
|
|
}
|
|
};
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
return parseDate(dateStr).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
timeZone: 'America/Asuncion',
|
|
});
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h1 className="text-xl md:text-2xl font-bold text-primary-dark">Email Center</h1>
|
|
</div>
|
|
|
|
{/* Stats Cards */}
|
|
{stats && (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
|
|
<EnvelopeIcon className="w-5 h-5 text-blue-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold">{stats.total}</p>
|
|
<p className="text-sm text-gray-500">Total Sent</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
|
|
<CheckCircleIcon className="w-5 h-5 text-green-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold">{stats.sent}</p>
|
|
<p className="text-sm text-gray-500">Delivered</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-yellow-100 rounded-full flex items-center justify-center">
|
|
<ClockIcon className="w-5 h-5 text-yellow-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold">{stats.pending}</p>
|
|
<p className="text-sm text-gray-500">Pending</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
<Card className="p-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
|
|
<XCircleIcon className="w-5 h-5 text-red-600" />
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-bold">{stats.failed}</p>
|
|
<p className="text-sm text-gray-500">Failed</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Tabs */}
|
|
<div className="border-b border-secondary-light-gray mb-6 overflow-x-auto scrollbar-hide">
|
|
<nav className="flex gap-4 md:gap-6 min-w-max">
|
|
{(['templates', 'compose', 'logs'] as TabType[]).map((tab) => (
|
|
<button
|
|
key={tab}
|
|
onClick={() => setActiveTab(tab)}
|
|
className={clsx(
|
|
'py-3 px-1 border-b-2 font-medium text-sm transition-colors relative whitespace-nowrap min-h-[44px]',
|
|
activeTab === tab ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700'
|
|
)}
|
|
>
|
|
{tab === 'templates' ? 'Templates' : tab === 'compose' ? 'Compose' : 'Email Logs'}
|
|
{tab === 'compose' && hasDraft && (
|
|
<span className="absolute -top-1 -right-2 w-2 h-2 bg-primary-yellow rounded-full" />
|
|
)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Templates Tab */}
|
|
{activeTab === 'templates' && (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<p className="text-gray-600">Manage email templates for booking confirmations, receipts, and updates.</p>
|
|
<Button onClick={() => { resetTemplateForm(); setShowTemplateForm(true); }}>
|
|
Create Template
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid gap-4">
|
|
{templates.map((template) => (
|
|
<Card key={template.id} className="p-4">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="font-semibold text-lg">{template.name}</h3>
|
|
{template.isSystem && (
|
|
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">System</span>
|
|
)}
|
|
{!template.isActive && (
|
|
<span className="text-xs bg-red-100 text-red-600 px-2 py-0.5 rounded">Inactive</span>
|
|
)}
|
|
</div>
|
|
<p className="text-sm text-gray-500 mt-1">{template.slug}</p>
|
|
<p className="text-sm text-gray-600 mt-2">{template.description || 'No description'}</p>
|
|
<p className="text-sm font-medium mt-2">Subject: {template.subject}</p>
|
|
{template.variables && template.variables.length > 0 && (
|
|
<div className="mt-2 flex flex-wrap gap-1">
|
|
{template.variables.slice(0, 5).map((v: any) => (
|
|
<span key={v.name} className="text-xs bg-primary-yellow/20 text-primary-dark px-2 py-0.5 rounded">
|
|
{`{{${v.name}}}`}
|
|
</span>
|
|
))}
|
|
{template.variables.length > 5 && (
|
|
<span className="text-xs text-gray-500">+{template.variables.length - 5} more</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<button onClick={() => handlePreviewTemplate(template)}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center" title="Preview">
|
|
<EyeIcon className="w-5 h-5" />
|
|
</button>
|
|
<button onClick={() => handleEditTemplate(template)}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center hidden md:flex" title="Edit">
|
|
<PencilIcon className="w-5 h-5" />
|
|
</button>
|
|
<div className="hidden md:block">
|
|
{!template.isSystem && (
|
|
<button onClick={() => handleDeleteTemplate(template.id)}
|
|
className="p-2 hover:bg-red-100 text-red-600 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center" title="Delete">
|
|
<XCircleIcon className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="md:hidden">
|
|
<MoreMenu>
|
|
<DropdownItem onClick={() => handleEditTemplate(template)}>
|
|
<PencilIcon className="w-4 h-4 mr-2" /> Edit
|
|
</DropdownItem>
|
|
{!template.isSystem && (
|
|
<DropdownItem onClick={() => handleDeleteTemplate(template.id)} className="text-red-600">
|
|
<XCircleIcon className="w-4 h-4 mr-2" /> Delete
|
|
</DropdownItem>
|
|
)}
|
|
</MoreMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Compose Tab */}
|
|
{activeTab === 'compose' && (
|
|
<div>
|
|
<Card className="p-6">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-lg font-semibold">Compose Email to Event Attendees</h2>
|
|
<div className="flex items-center gap-2">
|
|
{hasDraft && (
|
|
<span className="text-xs text-gray-500">
|
|
Draft saved {composeForm.savedAt ? parseDate(composeForm.savedAt).toLocaleString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: 'America/Asuncion' }) : ''}
|
|
</span>
|
|
)}
|
|
<Button variant="outline" size="sm" onClick={saveDraft}>
|
|
Save Draft
|
|
</Button>
|
|
{hasDraft && (
|
|
<Button variant="ghost" size="sm" onClick={clearDraft}>
|
|
Clear Draft
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{/* Event Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Select Event *</label>
|
|
<select
|
|
value={composeForm.eventId}
|
|
onChange={(e) => setComposeForm({ ...composeForm, eventId: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
|
|
>
|
|
<option value="">Choose an event</option>
|
|
{events.filter(e => e.status === 'published' || e.status === 'unlisted').map((event) => (
|
|
<option key={event.id} value={event.id}>
|
|
{event.title} - {parseDate(event.startDatetime).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', { timeZone: 'America/Asuncion' })}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Recipient Filter */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Recipients</label>
|
|
<select
|
|
value={composeForm.recipientFilter}
|
|
onChange={(e) => setComposeForm({ ...composeForm, recipientFilter: e.target.value as any })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
|
|
>
|
|
<option value="all">All attendees</option>
|
|
<option value="confirmed">Confirmed only</option>
|
|
<option value="pending">Pending only</option>
|
|
<option value="checked_in">Checked in only</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Template Selection */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Email Template *</label>
|
|
<select
|
|
value={composeForm.templateSlug}
|
|
onChange={(e) => setComposeForm({ ...composeForm, templateSlug: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
|
|
>
|
|
<option value="">Choose a template</option>
|
|
{templates.filter(t => t.isActive).map((template) => (
|
|
<option key={template.id} value={template.slug}>
|
|
{template.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Custom Message */}
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">
|
|
Custom Message (optional)
|
|
</label>
|
|
<textarea
|
|
value={composeForm.customBody}
|
|
onChange={(e) => setComposeForm({ ...composeForm, customBody: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray"
|
|
rows={4}
|
|
placeholder="Add a custom message that will be included in the email..."
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
This will be available as {'{{customMessage}}'} in the template
|
|
</p>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-3 pt-4 border-t border-secondary-light-gray">
|
|
<Button
|
|
onClick={loadRecipientPreview}
|
|
disabled={!composeForm.eventId}
|
|
>
|
|
Preview Recipients
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
|
|
{/* Recipient Preview Modal */}
|
|
{showRecipientPreview && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
|
<Card className="w-full md:max-w-2xl max-h-[80vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
|
|
<div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
|
|
<div>
|
|
<h2 className="text-base font-bold">Recipient Preview</h2>
|
|
<p className="text-xs text-gray-500">{previewRecipients.length} recipient(s)</p>
|
|
</div>
|
|
<button onClick={() => setShowRecipientPreview(false)}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{previewRecipients.length === 0 ? (
|
|
<p className="text-center text-gray-500 py-8">
|
|
No recipients match your filter criteria
|
|
</p>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{previewRecipients.map((recipient: any) => (
|
|
<div
|
|
key={recipient.id}
|
|
className="flex items-center justify-between p-3 bg-secondary-gray rounded-btn"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-sm">{recipient.attendeeFirstName} {recipient.attendeeLastName || ''}</p>
|
|
<p className="text-xs text-gray-500">{recipient.attendeeEmail}</p>
|
|
</div>
|
|
<span className={clsx('badge text-xs', {
|
|
'badge-success': recipient.status === 'confirmed',
|
|
'badge-warning': recipient.status === 'pending',
|
|
'badge-info': recipient.status === 'checked_in',
|
|
'badge-gray': recipient.status === 'cancelled',
|
|
})}>
|
|
{recipient.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="p-4 border-t border-secondary-light-gray flex gap-3">
|
|
<Button onClick={handleSendEmail} isLoading={sending} disabled={previewRecipients.length === 0} className="flex-1 min-h-[44px]">
|
|
Send to {previewRecipients.length}
|
|
</Button>
|
|
<Button variant="outline" onClick={() => setShowRecipientPreview(false)} className="flex-1 min-h-[44px]">
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Logs Tab */}
|
|
{activeTab === 'logs' && (
|
|
<div>
|
|
{/* Sub-tabs: All | Failed */}
|
|
<div className="border-b border-secondary-light-gray mb-4">
|
|
<nav className="flex gap-4">
|
|
<button
|
|
onClick={() => { setLogsSubTab('all'); setLogsOffset(0); }}
|
|
className={clsx(
|
|
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
|
|
logsSubTab === 'all' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700'
|
|
)}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
onClick={() => { setLogsSubTab('failed'); setLogsOffset(0); }}
|
|
className={clsx(
|
|
'py-2 px-1 border-b-2 font-medium text-sm transition-colors',
|
|
logsSubTab === 'failed' ? 'border-primary-yellow text-primary-dark' : 'border-transparent text-gray-500 hover:text-gray-700'
|
|
)}
|
|
>
|
|
Failed
|
|
{stats && stats.failed > 0 && (
|
|
<span className="ml-1.5 inline-flex items-center justify-center px-1.5 py-0.5 text-xs font-medium rounded-full bg-red-100 text-red-700">
|
|
{stats.failed}
|
|
</span>
|
|
)}
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
{/* Filters: search + event */}
|
|
<div className="flex flex-col md:flex-row gap-3 mb-4">
|
|
<div className="relative flex-1">
|
|
<MagnifyingGlassIcon className="w-5 h-5 text-gray-400 absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
|
|
<input
|
|
type="text"
|
|
value={logsSearch}
|
|
onChange={(e) => 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 && (
|
|
<button
|
|
onClick={() => setLogsSearch('')}
|
|
className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-100 rounded-btn"
|
|
title="Clear search"
|
|
>
|
|
<XMarkIcon className="w-4 h-4 text-gray-400" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<select
|
|
value={logsEventFilter}
|
|
onChange={(e) => setLogsEventFilter(e.target.value)}
|
|
className="w-full md:w-64 px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
>
|
|
<option value="">All events</option>
|
|
{events.map((event) => (
|
|
<option key={event.id} value={event.id}>
|
|
{event.title}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Desktop: Table */}
|
|
<Card className="overflow-hidden hidden md:block">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-secondary-gray">
|
|
<tr>
|
|
<th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
|
|
<th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Recipient</th>
|
|
<th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
|
|
<th className="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Sent</th>
|
|
<th className="text-right px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-secondary-light-gray">
|
|
{logs.length === 0 ? (
|
|
<tr><td colSpan={5} className="px-4 py-12 text-center text-gray-500 text-sm">{(debouncedSearch.trim() || logsEventFilter) ? 'No emails match your filters' : logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'}</td></tr>
|
|
) : (
|
|
logs.map((log) => (
|
|
<tr key={log.id} className="hover:bg-gray-50">
|
|
<td className="px-4 py-3">
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex items-center gap-2">{getStatusIcon(log.status)}<span className="capitalize text-sm">{log.status}</span></div>
|
|
{(log.resendAttempts ?? 0) > 0 && (
|
|
<span className="text-xs text-gray-500">Re-sent {log.resendAttempts} time{(log.resendAttempts ?? 0) !== 1 ? 's' : ''}</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<td className="px-4 py-3">
|
|
<p className="font-medium text-sm">{log.recipientName || 'Unknown'}</p>
|
|
<p className="text-xs text-gray-500">{log.recipientEmail}</p>
|
|
</td>
|
|
<td className="px-4 py-3 max-w-xs"><p className="text-sm truncate">{log.subject}</p></td>
|
|
<td className="px-4 py-3 text-xs text-gray-500">{formatDate(log.sentAt || log.createdAt)}</td>
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center justify-end gap-1">
|
|
<button
|
|
onClick={() => handleResend(log)}
|
|
disabled={resendingLogId === log.id}
|
|
className="p-2 hover:bg-gray-100 rounded-btn disabled:opacity-50"
|
|
title="Re-send"
|
|
>
|
|
<ArrowPathIcon className={clsx('w-4 h-4', resendingLogId === log.id && 'animate-spin')} />
|
|
</button>
|
|
<button onClick={() => setSelectedLog(log)} className="p-2 hover:bg-gray-100 rounded-btn" title="View">
|
|
<EyeIcon className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{logsTotal > 20 && (
|
|
<div className="flex items-center justify-between px-4 py-3 border-t border-secondary-light-gray">
|
|
<p className="text-sm text-gray-600">Showing {logsOffset + 1}-{Math.min(logsOffset + 20, logsTotal)} of {logsTotal}</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" disabled={logsOffset === 0} onClick={() => setLogsOffset(Math.max(0, logsOffset - 20))}>
|
|
<ChevronLeftIcon className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={logsOffset + 20 >= logsTotal} onClick={() => setLogsOffset(logsOffset + 20)}>
|
|
<ChevronRightIcon className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Mobile: Card List */}
|
|
<div className="md:hidden space-y-2">
|
|
{logs.length === 0 ? (
|
|
<div className="text-center py-10 text-gray-500 text-sm">{(debouncedSearch.trim() || logsEventFilter) ? 'No emails match your filters' : logsSubTab === 'failed' ? 'No failed emails' : 'No emails sent yet'}</div>
|
|
) : (
|
|
logs.map((log) => (
|
|
<Card key={log.id} className="p-3" onClick={() => setSelectedLog(log)}>
|
|
<div className="flex items-start gap-2.5">
|
|
<div className="mt-0.5 flex-shrink-0">{getStatusIcon(log.status)}</div>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="font-medium text-sm truncate">{log.subject}</p>
|
|
<p className="text-xs text-gray-500 truncate">{log.recipientName || 'Unknown'} <{log.recipientEmail}></p>
|
|
<p className="text-[10px] text-gray-400 mt-1">{formatDate(log.sentAt || log.createdAt)}</p>
|
|
{(log.resendAttempts ?? 0) > 0 && (
|
|
<p className="text-[10px] text-gray-500 mt-0.5">Re-sent {log.resendAttempts} time{(log.resendAttempts ?? 0) !== 1 ? 's' : ''}</p>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); handleResend(log); }}
|
|
disabled={resendingLogId === log.id}
|
|
className="p-2 hover:bg-gray-100 rounded-btn flex-shrink-0 disabled:opacity-50"
|
|
title="Re-send"
|
|
>
|
|
<ArrowPathIcon className={clsx('w-4 h-4', resendingLogId === log.id && 'animate-spin')} />
|
|
</button>
|
|
</div>
|
|
</Card>
|
|
))
|
|
)}
|
|
{logsTotal > 20 && (
|
|
<div className="flex items-center justify-between py-3">
|
|
<p className="text-xs text-gray-500">{logsOffset + 1}-{Math.min(logsOffset + 20, logsTotal)} of {logsTotal}</p>
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" disabled={logsOffset === 0} onClick={() => setLogsOffset(Math.max(0, logsOffset - 20))} className="min-h-[44px]">
|
|
<ChevronLeftIcon className="w-4 h-4" />
|
|
</Button>
|
|
<Button variant="outline" size="sm" disabled={logsOffset + 20 >= logsTotal} onClick={() => setLogsOffset(logsOffset + 20)} className="min-h-[44px]">
|
|
<ChevronRightIcon className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Template Form Modal */}
|
|
{showTemplateForm && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
|
<Card className="w-full md:max-w-4xl max-h-[90vh] flex flex-col overflow-hidden rounded-t-2xl md:rounded-card">
|
|
<div className="flex items-center justify-between p-4 border-b border-secondary-light-gray flex-shrink-0">
|
|
<h2 className="text-base font-bold">{editingTemplate ? 'Edit Template' : 'Create Template'}</h2>
|
|
<button onClick={() => { setShowTemplateForm(false); resetTemplateForm(); }}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSaveTemplate} className="p-4 space-y-4 overflow-y-auto flex-1 min-h-0">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Template Name"
|
|
value={templateForm.name}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, name: e.target.value })}
|
|
required
|
|
placeholder="e.g., Booking Confirmation"
|
|
/>
|
|
<Input
|
|
label="Slug (unique identifier)"
|
|
value={templateForm.slug}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, slug: e.target.value })}
|
|
required
|
|
disabled={editingTemplate?.isSystem}
|
|
placeholder="e.g., booking-confirmation"
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<Input
|
|
label="Subject (English)"
|
|
value={templateForm.subject}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, subject: e.target.value })}
|
|
required
|
|
placeholder="e.g., Your Spanglish ticket is confirmed"
|
|
/>
|
|
<Input
|
|
label="Subject (Spanish)"
|
|
value={templateForm.subjectEs}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, subjectEs: e.target.value })}
|
|
placeholder="e.g., Tu entrada de Spanglish está confirmada"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Body HTML (English)</label>
|
|
<textarea
|
|
value={templateForm.bodyHtml}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, bodyHtml: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow font-mono text-sm"
|
|
rows={8}
|
|
required
|
|
placeholder="<h2>Your Booking is Confirmed!</h2>..."
|
|
/>
|
|
<p className="text-xs text-gray-500 mt-1">
|
|
Use {`{{variableName}}`} for dynamic content. Common variables: attendeeName, eventTitle, eventDate, ticketId
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Body HTML (Spanish)</label>
|
|
<textarea
|
|
value={templateForm.bodyHtmlEs}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, bodyHtmlEs: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow font-mono text-sm"
|
|
rows={6}
|
|
placeholder="<h2>¡Tu Reserva está Confirmada!</h2>..."
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium mb-1">Description</label>
|
|
<textarea
|
|
value={templateForm.description}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, description: e.target.value })}
|
|
className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
|
|
rows={2}
|
|
placeholder="What is this template used for?"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="checkbox"
|
|
id="isActive"
|
|
checked={templateForm.isActive}
|
|
onChange={(e) => setTemplateForm({ ...templateForm, isActive: e.target.checked })}
|
|
className="w-4 h-4"
|
|
/>
|
|
<label htmlFor="isActive" className="text-sm">Template is active</label>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-4">
|
|
<Button type="submit" isLoading={saving} className="flex-1 min-h-[44px]">
|
|
{editingTemplate ? 'Update' : 'Create'}
|
|
</Button>
|
|
<Button type="button" variant="outline" onClick={() => { setShowTemplateForm(false); resetTemplateForm(); }} className="flex-1 min-h-[44px]">
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Preview Modal */}
|
|
{previewHtml && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
|
<Card className="w-full md:max-w-3xl max-h-[90vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
|
|
<div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
|
|
<div className="min-w-0">
|
|
<h2 className="text-base font-bold">Email Preview</h2>
|
|
<p className="text-xs text-gray-500 truncate">Subject: {previewSubject}</p>
|
|
</div>
|
|
<button onClick={() => setPreviewHtml(null)}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center flex-shrink-0">
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
<iframe
|
|
srcDoc={previewHtml}
|
|
className="w-full h-full min-h-[500px]"
|
|
title="Email Preview"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
|
|
{/* Log Detail Modal */}
|
|
<AdminMobileStyles />
|
|
|
|
{selectedLog && (
|
|
<div className="fixed inset-0 bg-black/50 z-50 flex items-end md:items-center justify-center p-0 md:p-4">
|
|
<Card className="w-full md:max-w-3xl max-h-[90vh] overflow-hidden flex flex-col rounded-t-2xl md:rounded-card">
|
|
<div className="flex items-center justify-between p-4 border-b border-secondary-light-gray">
|
|
<div className="min-w-0">
|
|
<h2 className="text-base font-bold">Email Details</h2>
|
|
<div className="flex items-center gap-2 mt-1 flex-wrap">
|
|
{getStatusIcon(selectedLog.status)}
|
|
<span className="capitalize text-sm">{selectedLog.status}</span>
|
|
{selectedLog.errorMessage && (
|
|
<span className="text-xs text-red-500">- {selectedLog.errorMessage}</span>
|
|
)}
|
|
{(selectedLog.resendAttempts ?? 0) > 0 && (
|
|
<span className="text-xs text-gray-500">Re-sent {selectedLog.resendAttempts} time{(selectedLog.resendAttempts ?? 0) !== 1 ? 's' : ''}{selectedLog.lastResentAt ? ` (${formatDate(selectedLog.lastResentAt)})` : ''}</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-1 flex-shrink-0">
|
|
<button
|
|
onClick={() => handleResend(selectedLog)}
|
|
disabled={resendingLogId === selectedLog.id}
|
|
className="p-2 hover:bg-gray-100 rounded-btn disabled:opacity-50 flex items-center gap-1.5 text-sm"
|
|
title="Re-send"
|
|
>
|
|
<ArrowPathIcon className={clsx('w-4 h-4', resendingLogId === selectedLog.id && 'animate-spin')} />
|
|
Re-send
|
|
</button>
|
|
<button onClick={() => setSelectedLog(null)}
|
|
className="p-2 hover:bg-gray-100 rounded-btn min-h-[44px] min-w-[44px] flex items-center justify-center">
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="p-4 space-y-2 border-b border-secondary-light-gray bg-gray-50">
|
|
<p><strong>To:</strong> {selectedLog.recipientName} <{selectedLog.recipientEmail}></p>
|
|
<p><strong>Subject:</strong> {selectedLog.subject}</p>
|
|
<p><strong>Sent:</strong> {formatDate(selectedLog.sentAt || selectedLog.createdAt)}</p>
|
|
</div>
|
|
<div className="flex-1 overflow-auto">
|
|
{selectedLog.bodyHtml ? (
|
|
<iframe
|
|
srcDoc={selectedLog.bodyHtml}
|
|
className="w-full h-full min-h-[400px]"
|
|
title="Email Content"
|
|
/>
|
|
) : (
|
|
<div className="p-4 text-gray-500">Email content not available</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|