Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 2x 30x 30x | import { AppDialog } from '@/components/common/AppDialog';
import { Badge } from '@/components/ui/badge';
import type { EmailLog } from '@/services/email.service';
import { format } from 'date-fns';
interface EmailLogDetailProps {
log: EmailLog | null;
open: boolean;
onOpenChange: (open: boolean) => void;
}
const EmailLogDetail = ({ log, open, onOpenChange }: EmailLogDetailProps) => {
Eif (!log) return null;
const statusVariant =
log.status === 'sent'
? 'default'
: log.status === 'failed'
? 'destructive'
: 'secondary';
return (
<AppDialog
open={open}
onOpenChange={onOpenChange}
title="Email Log Details"
className="max-w-2xl"
>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="text-sm font-medium text-muted-foreground">
Status
</label>
<div className="mt-1">
<Badge variant={statusVariant} className="capitalize">
{log.status}
</Badge>
</div>
</div>
<div>
<label className="text-sm font-medium text-muted-foreground">
Provider
</label>
<p className="mt-1 text-sm font-mono uppercase">{log.provider}</p>
</div>
<div>
<label className="text-sm font-medium text-muted-foreground">
Recipient
</label>
<p className="mt-1 text-sm">{log.recipient_email}</p>
</div>
<div>
<label className="text-sm font-medium text-muted-foreground">
Template Type
</label>
<p className="mt-1 text-sm capitalize">
{log.template_type.replace(/_/g, ' ')}
</p>
</div>
<div>
<label className="text-sm font-medium text-muted-foreground">
Sent At
</label>
<p className="mt-1 text-sm">
{format(new Date(log.sent_at), 'PPpp')}
</p>
</div>
<div>
<label className="text-sm font-medium text-muted-foreground">
Log ID
</label>
<p className="mt-1 font-mono text-xs">{log.id}</p>
</div>
</div>
{log.error_message && (
<div>
<label className="text-sm font-medium text-destructive">
Error Message
</label>
<div className="mt-1 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
<p className="text-sm text-destructive whitespace-pre-wrap">
{log.error_message}
</p>
</div>
</div>
)}
{log.variables && Object.keys(log.variables).length > 0 && (
<div>
<label className="text-sm font-medium text-muted-foreground">
Template Variables
</label>
<div className="mt-1 p-3 bg-muted rounded-md">
<dl className="space-y-2">
{Object.entries(log.variables).map(([key, value]) => (
<div key={key} className="flex gap-2">
<dt className="text-sm font-medium min-w-30">
{key}:
</dt>
<dd className="text-sm text-muted-foreground">
{value}
</dd>
</div>
))}
</dl>
</div>
</div>
)}
</div>
</AppDialog>
);
};
export default EmailLogDetail;
|