import { Head, router } from '@inertiajs/react'; import { CheckCircle2, Eye, Mail, MousePointerClick, XCircle } from 'lucide-react'; import { useState } from 'react'; import { PageHeader } from '@/components/layout/page-header'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet'; import adminSentEmails from '@/routes/admin/sent-emails'; type SentEmail = { id: string; to_email: string; to_name: string | null; subject: string; event_key: string | null; template: { id: number; name: string } | null; status: string; opened_at: string | null; open_count: number; click_count: number; created_at: string; }; type Paginated = { data: T[]; current_page: number; last_page: number; per_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { emails: Paginated; filters: { search?: string; event_key?: string; status?: string }; }; const STATUS_LABELS: Record = { queued: { label: 'Queued', variant: 'secondary' }, sent: { label: 'Sent', variant: 'outline' }, delivered: { label: 'Delivered', variant: 'default' }, bounced: { label: 'Bounced', variant: 'destructive' }, failed: { label: 'Failed', variant: 'destructive' }, }; function formatDate(iso: string): string { return new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }); } export default function AdminSentEmailsIndex({ emails, filters }: Props) { const [search, setSearch] = useState(filters.search ?? ''); const [status, setStatus] = useState(filters.status ?? ''); const [previewEmail, setPreviewEmail] = useState(null); const [previewHtml, setPreviewHtml] = useState(null); const applyFilters = (overrides: Partial = {}) => { router.get(adminSentEmails.index.url(), { search: overrides.search ?? search, status: overrides.status ?? status, }, { preserveState: true, replace: true }); }; const openPreview = async (email: SentEmail) => { setPreviewEmail(email); setPreviewHtml(null); try { const res = await fetch(`/admin/sent-emails/${email.id}/html`); if (res.ok) setPreviewHtml(await res.text()); } catch { /* silent */ } }; const { data: rows, total, links } = emails; return ( <>
{/* Filters */}
setSearch(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && applyFilters({ search })} className="sm:max-w-xs" />
{/* Table — card layout on mobile, table on md+ */} {/* Desktop */}
{rows.map((email) => { const s = STATUS_LABELS[email.status] ?? { label: email.status, variant: 'secondary' as const }; return ( ); })}
To Subject Template Status Opens Clicks Sent
{email.to_name ?? email.to_email}
{email.to_name &&
{email.to_email}
} 		{email.subject} {email.template?.name ?? email.event_key ?? '—'} {s.label}
{email.opened_at ? : } {email.open_count}
{email.click_count}
{formatDate(email.created_at)}
{/* Mobile cards */}
{rows.map((email) => { const s = STATUS_LABELS[email.status] ?? { label: email.status, variant: 'secondary' as const }; return (
{s.label} {email.opened_at && }

{email.to_email}

{email.subject}

{formatDate(email.created_at)}

); })}
{rows.length === 0 && (

No emails found.

)} {/* Pagination */} {emails.last_page > 1 && (
{links.map((link, i) => (
)}
{/* Preview sheet */} { if (!open) setPreviewEmail(null); }}> Email Preview {previewEmail && (
To: {previewEmail.to_email} Subject: {previewEmail.subject} Sent: {formatDate(previewEmail.created_at)}
{previewEmail.opened_at ? : } {previewEmail.open_count} opens {previewEmail.click_count} clicks
)}
{previewHtml ? (